Pass an Array as a prop to a component in React.js

avatar
Borislav Hadzhiev

Last updated: Jan 15, 2023
2 min

banner

# Pass an Array as a prop to a component in React.js

To pass an array as a prop to a component in React, wrap the array in curly braces, e.g. <Books arr={['A', 'B', 'C']} />.

The child component can perform custom logic on the array or use the map() method to render the array's elements.

App.js
function Books({arr}) { console.log(arr); // ๐Ÿ‘‰๏ธ ['A', 'B', 'C', 'D'] return ( <div> {arr.map(title => { return <div key={title}>{title}</div>; })} </div> ); } export default function App() { const arr = ['A', 'B', 'C', 'D']; return ( <div> <Books arr={arr} /> </div> ); }

pass array as prop to component

When passing any prop other than a string to a React component, we have to wrap the value in curly braces.

The curly braces mark the beginning of the expression.

The prop we passed to the Books component is called arr, so the component can destructure the prop and perform logic on it or use the Array.map() method to render its elements.

# Passing an anonymous, inline array as a prop to a component

You can also pass the array prop to the component inline.

App.js
function Books({arr}) { console.log(arr); // ๐Ÿ‘‰๏ธ ['A', 'B', 'C', 'D'] return ( <div> {arr.map(title => { return <div key={title}>{title}</div>; })} </div> ); } export default function App() { return ( <div> <Books arr={['A', 'B', 'C', 'D']} /> </div> ); }

passing anonymous inline array as prop to component

The code snippet achieves the same result.

If you need to pass an object as props, click on the link and follow the instructions.

# Set a key prop when iterating over an array

If you iterate over the array, make sure to set a unique key prop on each element.

This is necessary because it helps React keep track of which array elements changed between re-renders. This enables React to make our applications faster by just updating the array elements that changed.

When adding a key prop to a React Fragment, make sure to use the verbose syntax.

Note that you shouldn't try to access the key property, otherwise, the warning Key is not a prop. Trying to access it will result in undefined is raised.

# Passing individual array elements as props to a component

You can also pass individual array elements as props to a component.

App.js
function Books({first, second}) { console.log(first); // ๐Ÿ‘‰๏ธ 'A' console.log(second); // ๐Ÿ‘‰๏ธ 'B' return ( <div> {first} {second} </div> ); } export default function App() { const arr = ['A', 'B', 'C', 'D']; return ( <div> <Books first={arr[0]} second={arr[1]} /> </div> ); }

passing individual array elements as props

We are able to pass individual array elements as props to a component by accessing the array element at the specific index.

If you need to check if a prop is passed to a component, click on the following article.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev