How do I use props in functional components?

How do I use props in functional components?

In functional components, you can access props by passing them as an argument to the function. For example, if you have a component like this: function MyComponent(props) { ... }, you can use props to access the values.

Can you give me an example of using props?

Sure! Here's a simple example:

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

<Greeting name="Alice" />

This will render 'Hello, Alice!'.

What if I want to pass multiple props?

You can pass multiple props just like this:

function UserProfile(props) {
  return <div>{props.name} is {props.age} years old.</div>;
}

<UserProfile name="Bob" age={30} />

Are there any best practices for using props?

Yes! It's good to use PropTypes to validate props, keep your components reusable, and avoid prop drilling by using context when necessary.