Component Props

In React, component props are used to pass data from a parent component to a child component. Props are similar to function arguments in that they are passed in as an object when the component is called.

Here's how you would typically create and pass props to a child component:

Define the child component and its props.

In this example, we'll create a child component called UserCard that takes in a name and age prop.

function UserCard(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  )
}

Call the child component in parent component

In the parent component, import the child component and call it with the desired props.

import UserCard from './UserCard';

function App() {
  return (
    <div>
      <UserCard name="John Smith" age={30} />
    </div>
  );
}

When the parent component is rendered, the child component will receive the props passed in and display the name and age accordingly.

<div>
  <p>Name: John Smith</p>
  <p>Age: 30</p>
</div>

It's important to note that props are read-only and should not be modified within the child component. If a component needs to modify data, it should use state instead.