How to pass props one component to other component in react
Tags: webdev, javascript, beginners, react
Published: 2024-04-03 05:47:28

Passing an array as props to a React functional component is quite straightforward. You simply include the array as a property when you use the component in your JSX code. Here's an example:

```jsx
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  // Define an array
  const data = [1, 2, 3, 4, 5];

  return (
    <div>
      {/* Pass the array as a prop to ChildComponent */}
      <ChildComponent dataArray={data} />
    </div>
  );
}

export default ParentComponent;
```

And here's the child component:

```jsx
// ChildComponent.js
import React from 'react';

const ChildComponent = ({ dataArray }) => {
  // Now you can use `dataArray` inside the ChildComponent
  return (
    <div>
      <h2>Data from Parent:</h2>
      <ul>
        {dataArray.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ChildComponent;
```

In this example:

- `ParentComponent` defines an array called `data`.
- It renders `ChildComponent` and passes `data` as a prop named `dataArray`.
- `ChildComponent` receives `dataArray` as a parameter in its function component definition and uses it to render a list.

You can now access the array passed from the parent component (`ParentComponent`) within the child component (`ChildComponent`) using the prop name specified during its passing.

[github](https://github.com/04anilr)
[website](https://my-portfolio-two-lemon-36.vercel.app/)
[How to render an array of objects in ReactJS ?](https://dev.to/04anilr/how-to-render-an-array-of-objects-in-reactjs--5d48)
[How to Become a Front-End Developer?](https://dev.to/04anilr/how-to-become-a-front-end-developer-5gfk)
[Array methods in react.js ](https://dev.to/04anilr/how-to-use-array-methods-in-real-project-example-add-new-record-3o82)
[Fragment in react.js](https://dev.to/04anilr/fragment-in-reactjs-example-of-fragment-299a) 
[Conditional rendering in react.js](https://dev.to/04anilr/conditional-rendering-in-react-conditional-rendering-example-in-react-3j46)
[Children component in react.js](https://dev.to/04anilr/methods-of-react-children-component-in-react-4ol7)
[use of Async/Await in react.js](https://dev.to/04anilr/how-to-use-asyncawait-3a3o)
[Array methods in react.js](https://dev.to/04anilr/array-methods-in-reactjs-36jb)
[JSX in react.js](https://dev.to/04anilr/jsx-in-reactjs-3f7o)
[Event Handling in react.js](https://dev.to/04anilr/event-handling-in-react-5hc7)
[Arrow function in react.js](https://dev.to/04anilr/arrow-functions-in-react-4gb2)
[Virtual DOM in react.js](https://dev.to/04anilr/how-to-work-virtual-dom-in-react-dom-1b39)
[React map() in react.js](https://dev.to/04anilr/how-to-create-react-map-24pp)
[How to create dark mode in react.js](https://dev.to/04anilr/how-to-create-dark-mode-in-react-js-2kn2)
[How to use of Props in react.js](https://dev.to/04anilr/props-and-state-with-example-1bl1)
[Class component and Functional component](https://dev.to/04anilr/class-component-functional-component-in-react-k43)
[How to use of Router in react.js](https://dev.to/04anilr/how-to-use-of-router-in-reactreact-router-1163)
[All React hooks explain ](https://dev.to/04anilr/react-hooks-cheat-sheet-2hic)
[CSS box model ](https://dev.to/04anilr/css-box-model-work-2k0a)
[How to make portfolio nav-bar in react.js](https://dev.to/04anilr/how-to-make-nav-bar-for-portfolio-website-365m)