¿Cómo representar una array de objetos en ReactJS?

React.js es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Es ‘V’ en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook.
En este artículo, aprenderemos cómo renderizar una array de objetos en React.

Inicialmente, comenzaremos aprendiendo qué es una array de objetos.
 Array de objetos: almacena múltiples valores en una sola variable. El objeto puede contener cualquier cosa del mundo real, como nombres de personas, automóviles, personajes de juegos. Los objetos son muy fáciles de usar en algunas situaciones, si sabe dónde se procesan los datos. El juego de caracteres de los objetos se conoce como Propiedades. Las propiedades de un objeto se pueden llamar usando la notación DOT(“.”) y la notación (“[]”).
Sintaxis:

var object=[
   {
        "property1":"value1",
         "property2":"value2"
    }
]

Ahora, creemos una aplicación React para aprender cómo representar una array de objetos.
Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: una vez hecho esto, cambie su directorio a la aplicación recién creada usando el siguiente comando.

cd foldername

Estructura del proyecto: El proyecto debería verse así:
 

¿Cómo renderizaremos una array de objetos?
Usaremos la función map para acceder a cada objeto de la array.
El método map() en JavaScript crea una array llamando a una función específica en cada elemento presente en la array principal. Es un método no mutante. Generalmente, el método map() se usa para iterar sobre una array y llamar a la función en cada elemento de la array.
Sintaxis:

array.map(function(currentValue, index, arr), thisValue)

Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

• function(currentValue, index, arr): Es un parámetro obligatorio y se ejecuta en cada elemento de la array. Contiene tres parámetros, que se enumeran a continuación:
  • currentValue: es un parámetro obligatorio y contiene el valor del elemento actual.
  • índice: es un parámetro opcional y contiene el índice del elemento actual.
  • arr: es un parámetro opcional y contiene la array.
• thisValue: es un parámetro opcional y se usa para contener el valor de pasado a la función.

Valor de retorno: Devuelve una nueva array y los elementos de las arrays son el resultado de la función de devolución de llamada.

Ejemplo 1: En este ejemplo, simplemente crearemos una array de objetos que contenga estados y sus capitales. Los representaremos en una lista desordenada. Los estados están en rojo y en negrita.

import React from 'react'
function RenderingArrayOfObjects() {
    const data = [
        {
            "State": "Uttar Pradesh",
            "Capital": "Lucknow"
        },
        {
            "State": "Gujarat",
            "Capital": "Gandhinagar"
        },
        {
            "State": "Karnataka",
            "Capital": "Bengaluru"
        },
        {
            "State": "Punjab",
            "Capital": "Chandigarh"
        },
        {
            "State": "Maharashtra",
            "Capital": "Mumbai"
        }
    ]
    const listItems = data.map(
        (element) => {
            return (
                <ul type="disc">
                    <li style={{ 
                        fontWeight: 'bold', 
                        color: 'red' }}
                    >
                        {element.State}
                    </li>
                    <li>{element.Capital}</li>
                </ul>
            )
        }
    )
    return (
        <div>
            {listItems}
        </div>
    )
}
function App() {
    return (
        <div className="App">
            <div>
                <h1 style={{ color: 'green' }}>
                    GeeksforGeeks
                </h1>
                <h3>Rendering Array of Objects</h3>
                <br></br>
                <RenderingArrayOfObjects />
            </div>
        </div>
    );
}
  
export default App;

Producción:

Ejemplo 2: En este ejemplo, mapearemos una array de objetos que contiene las marcas de los estudiantes en una tabla.

Nota: Para ejecutar el siguiente ejemplo, debe instalar react-bootstrap y bootstrap.

npm install react-bootstrap bootstrap@5.1.3 bootstrap

import React from 'react';
import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';
  
function RenderingArrayOfObjects(){
  const data=[
      {
          "Name":"Nikita",
          "Marks":"98",
          "Phone":"123"
      },
      {
         "Name":"Pratiksha",
          "Marks":"96",
          "Phone":"127"
      },
      {
          "Name":"Muskan",
          "Marks":"97",
          "Phone":"163"
      },
      {
         "Name":"Nishi",
         "Marks":"95",
         "Phone":"193"
      },
      {
         "Name":"Himanshu",
        "Marks":"78",
        "Phone":"120"
      }
  ]
  const tableRows=data.map(
      (element)=>{
          return( 
              
            <tr>
              <td>{element.Name}</td>
              <td>{element.Marks}</td>
              <td>{element.Phone}</td>
            </tr>
              
          )
      }
  )
  return(
      <div>
          
        <Table hover>
            <thead>
              <tr>    
                <th> Name</th>
                <th>Marks</th>
                <th>Phone</th>
              </tr>
            </thead>
            <tbody>
              {tableRows}
            </tbody>
          </Table>      
            
      </div>
  )
}
function App() {
  return (
    <div className="App">
      <div>
        <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
        <h3>Rendering Array of Objects</h3>
  
        <br></br>
        <RenderingArrayOfObjects />
         
      </div>
    </div>
  );
}
  
export default App;

Producción: