React Props — Basic Steps

Props, short for properties, are inputs for your React components. They allow you to pass data from a parent component to a child component. This is useful when you want to reuse a component and provide it with different data.

Here's an example of how to use props. Let's say we have a component called Greeting that displays a greeting to the user. We want to be able to customize the greeting based on the name of the user.

First, we declare a prop called name in the Greeting component:

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
}

Next, we pass the value of the name prop from the parent component:

function App() {
  return (
    <div>
      <Greeting name="John" />
      <Greeting name="Jane" />
    </div>
  );
}

And that's it. Now the Greeting component displays the greeting based on the value of the name prop.

In conclusion, props are a great way to pass data from a parent component to a child component in React. They allow you to reuse components and provide them with different data, making your code more modular and maintainable.