Rendering React Components from Array of Objects
When working with React, you may come across a scenario where you need to render a list of components based on an array of objects. This can be achieved by using the map()
function in JavaScript to iterate over the array and create a new array of React components.
Let’s say we have an array of objects, each representing a person with their name and age:
const people = [
{ name: "John", age: 25 },
{ name: "Jane", age: 30 },
{ name: "Bob", age: 35 }
];
To render a list of components based on this array, we can use the map()
function to iterate over the array and create a new array of React components. Each component will receive the person’s name and age as props:
const PeopleList = () => {
return (
{people.map((person, index) => (
))}
);
};
In the above code, we are using the map()
function to iterate over the people
array. For each person, we are creating a new Person
component and passing the person’s name and age as props. We are also assigning a unique key to each component to help React efficiently update the list when needed.
Now let’s define the Person
component:
const Person = ({ name, age }) => {
return (
Name: {name}
Age: {age}
);
};
The Person
component receives the name and age as props and renders them within a
Person
component.
Finally, we can render the PeopleList
component in our main React component:
ReactDOM.render( , document.getElementById("root"));
This will render the list of components generated from the array of objects inside the element with the ID “root”.
By using the map()
function, we can easily render a list of React components from an array of objects. This approach is flexible and allows you to dynamically generate components based on your data.
Here’s the final HTML output:
<
pre>
Rendering React Components from Array of Objects
When working with React, you may come across a scenario where you need to render a list of components based on an array of objects. This can be achieved by using the map()
function in JavaScript to iterate over the array and create a new array of React components.
Let's say we have an array of objects, each representing a person with their name and age:
const people = [
{ name: "John", age: 25 },
{ name: "Jane", age: 30 },
{ name: "Bob", age: 35 }
];
To render a list of components based on this array, we can use the map()
function to iterate over the array and create a new array of React components. Each component will receive the person's name and age as props:
const PeopleList = () => {
return (
{people.map((person, index) => (
))}
);
};
In the above code, we are using the map()
function to iterate over the people
array. For each person, we are creating a new Person
component and passing the person's name and age as props. We are also assigning a unique key to each component to help React efficiently update the list when needed.
Now let's define the Person
component:
<
pre>const Person = ({ name, age }) => {
return (
Age: {age}
);
};
</pre>
Leave a Reply