How to use props in child component?

Using props in a child component in React is straightforward. Here’s a step-by-step guide on how to pass and utilize props effectively.

Step 1: Define the Parent Component

In your parent component, you will define the data you want to pass to the child component as props. You can pass any type of data, including strings, numbers, arrays, objects, or functions.

Example:

import React from 'react';
import Greeting from './Greeting';

function App() {
  const userName = "Alice";
  const userAge = 30;

  return (
    <div>
      <h1>Welcome to My App</h1>
      <Greeting name={userName} age={userAge} />
    </div>
  );
}

export default App;

Step 2: Create the Child Component

In the child component, you will receive the props as an argument. You can then use these props within the component to render dynamic content.

Example:

import React from 'react';

function Greeting(props) {
  return (
    <h2>
      Hello, {props.name}! You are {props.age} years old.
    </h2>
  );
}

export default Greeting;

Step 3: Accessing Props in the Child Component

In the Greeting component, you access the props using props.name and props.age. This allows you to display the values passed from the parent component.

Complete Example

Here’s how the complete setup looks:

App.jsx (Parent Component)

import React from 'react';
import Greeting from './Greeting';

function App() {
  const userName = "Alice";
  const userAge = 30;

  return (
    <div>
      <h1>Welcome to My App</h1>
      <Greeting name={userName} age={userAge} />
    </div>
  );
}

export default App;

Greeting.jsx (Child Component)

import React from 'react';

function Greeting(props) {
  return (
    <h2>
      Hello, {props.name}! You are {props.age} years old.
    </h2>
  );
}

export default Greeting;

Conclusion

By following these steps, you can easily pass data from a parent component to a child component using props. This allows for dynamic rendering and makes your components reusable.

If you have any further questions or need clarification on any part, feel free to ask!