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

element. You can customize the rendering of each person by modifying the JSX code within the 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 (

      Name: {name}
      Age: {age}
    
);
};
</pre&gt
Share this:FacebookX

Related Posts:
Iterate Through Object Properties In JavaScript, objects are a fundamental data type that allow you to store collections of key-value pairs. Often, you may...
TS compiler error iterating over type fields TS Compiler Error: Iterating Over Type Fields Published on JS Duck If you are working with TypeScript, you might have...
Get Data PhoneNumber from Google API using React OAuht Get Data PhoneNumber from Google API using React OAuth When working with React and OAuth, you may come across the...
Mapping data from JSON to Array in Typescript Mapping data from JSON to Array in TypeScript When working with TypeScript, you may often come across the need to...


	





	
	
	

	
	
		
		
			
			
				
				
					Posted				
				

				September 9, 2023

				
				
					in				
				

				React
			
			

			
			
				
				
					by				
				

				J. Kolby
			
			
		
		

		
		
			
			
				
				
					Tags:				
				

				React
			
			
		
		
	
	




	

	
	
		
		Comments
		

		

		

		

		
		Leave a Reply Cancel replyYour email address will not be published. Required fields are marked *Comment * Name * 
Email * 
Website 
 Save my name, email, and website in this browser for the next time I comment.