React Props

In React, props (short for "properties") are a way to pass data from a parent component to a child component. Props are read-only in the child component, meaning the child component cannot modify the props that are passed to it.

Here is an example of a parent component that passes a prop to a child component:

import React from 'react';

function ParentComponent() {
  return (
    <ChildComponent message="Hello World" />
  );
}

function ChildComponent(props) {
  return (
    <div>{props.message}</div>
  );
}

In this example, the `ParentComponent` renders the `ChildComponent` and passes a prop called `message` with the value "Hello World". The `ChildComponent` receives the prop as an argument called `props` and uses it to render the value of `props.message` in a `div` element.

Props can be any valid JavaScript value, such as numbers, strings, objects, or arrays. They can also be functions, which can be used to pass event handlers or other functions from the parent component to the child component.

It's important to note that props are intended for passing data down the component tree. If you need to modify data within a component or pass data between components that are not parent and child, you should consider using the React state instead.

Rakib Alom

About author

I am a professional web developer. I love programming and coding, and reading books. I am the founder and CEO of StorialTech.