es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo hacer un array dinámico en ReactJS?

04 Aug, 2023 Programación

Quiero hacer que mi fila de la tabla sea dinámica para que pueda agregar automáticamente nuevos datos desde la base de datos MySQL, pero no sé cómo. ¿Puedes ayudarme? ¡Muchas gracias!

Aquí está mi dato estático que quiero hacer dinámico. Tengo un error cada vez que pongo ‘campusValues.map’. Me da un mensaje de ”,’ expected’.

Aquí está la parte donde obtengo los datos de la base de datos y los almaceno en la variable ‘campusValues’.

const CampusPage = () => {

const [campusValues, setCampusValues] = useState([]);

const GetCampusValues = () => {
Axios.get(“http://localhost:5000/campusValues”).then((response) => {
console.log(response);
setCampusValues(response.data);
});
}

useEffect(() => {
let ignore = false;
if (!ignore)
GetCampusValues();
return () => { ignore = true; }
},[]);

return (…);
}

export default CampusPage

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer las filas de la tabla dinámicas, puedes reemplazar los datos estáticos con la variable de estado campusValues que has obtenido de la base de datos MySQL. Puedes usar la función map para iterar a través del array campusValues y crear una tabla dinámica. Aquí tienes un ejemplo:

    const CampusPage = () => {
  const [campusValues, setCampusValues] = useState([]);

  useEffect(() => {
    Axios.get("http://localhost:5000/campusValues").then((response) => {
      console.log(response);
      setCampusValues(response.data);
    });
  }, []);

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Nombre del Campus</th>
            <th>Número de Teléfono</th>
            <th>Acción</th>
          </tr>
        </thead>
        <tbody>
          {campusValues.map((campus, index) => (
            <tr key="{index}">
              <td>{campus.Campus_name}</td>
              <td>{campus.tel_number}</td>
              <td>
                <div classname='action-icon-container'>
                  <tooltip title='Editar' trigger='hover'>
                    <link to="{`/admin/campus/edit-campus/${campus.id}`}" state="{{" bc_edit_type:="" 1="" }}="">
                      <mdedit classname='action-icon editar'></mdedit>

                  </tooltip>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default CampusPage;

    En este código, hemos reemplazado los datos estáticos con la función campusValues.map. Estamos iterando a través del array campusValues y creando una nueva fila de tabla para cada campus. La propiedad key se utiliza para identificar cada fila de forma única.

    Nota: El código asume que el array campusValues tiene las propiedades id, Campus_name y tel_number. Es posible que necesites ajustar el código en función de la estructura de tu array campusValues.

Comments are closed.