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:
// 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:
// 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:
-
ParentComponentdefines an array calleddata. - It renders
ChildComponentand passesdataas a prop nameddataArray. -
ChildComponentreceivesdataArrayas 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
website
How to render an array of objects in ReactJS ?
How to Become a Front-End Developer?
Array methods in react.js
Fragment in react.js
Conditional rendering in react.js
Children component in react.js
use of Async/Await in react.js
Array methods in react.js
JSX in react.js
Event Handling in react.js
Arrow function in react.js
Virtual DOM in react.js
React map() in react.js
How to create dark mode in react.js
How to use of Props in react.js
Class component and Functional component
How to use of Router in react.js
All React hooks explain
CSS box model
How to make portfolio nav-bar in react.js
Top comments (0)