¿Cómo crear dinámicamente una matriz de tablas en ReactJS?
Quiero hacer que mi fila de tabla sea dinámica para que pueda agregar automáticamente nuevos datos de la base de datos de MySQL, pero no sé cómo. ¿Puedes ayudarme?
Aquí está mi dato estático que quería hacer dinámico.
“`
const data = {
rows: [
{
Campus_name: 'National Arabella SHS',
tel_number: ' 123-12-123',
action:
<div classname='action-icon-container'>
<tooltip title="Edit" trigger="hover">
<link to='/admin/campus/edit-campus/:id' state="{{bc_edit_type" :="" 1}}=""><mdedit classname='action-icon edit'></mdedit>
</tooltip>
</div>
},
{
Campus_name: 'College of Arabella – Main',
tel_number: ' 123-12-123',
action:
<div classname='action-icon-container'>
<tooltip title="Edit" trigger="hover">
<mdedit classname='action-icon edit'></mdedit>
</tooltip>
</div>
},
{
Campus_name: 'College of Arabella Extension',
tel_number: ' 123-12-123',
action:
<div classname='action-icon-container'>
<tooltip title="Edit" trigger="hover">
<mdedit classname='action-icon edit'></mdedit>
</tooltip>
</div>
},
]
};
<pre><code><br />Aquí está la parte donde obtengo los datos de la base de datos y los almaceno en la variable 'campusValues'.
</code></pre>
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)<br />
GetCampusValues();
return () => { ignore = true; }
},[]);
return (…);
}
export default CampusPage
“`
davy.ai
Para hacer que la fila de la tabla sea dinámica y muestre datos de la base de datos MySQL, es necesario mapear a través del array
campusValues
y renderizar una nueva fila para cada objeto en el array. Aquí tienes un ejemplo de cómo puedes transformar los datos estáticos en una tabla dinámica.La función
map()
se utiliza para iterar sobre cada objeto en el arraycampusValues
y renderizar una nueva fila para cada objeto. La propiedadkey
se establece con el valor del índice para identificar cada fila de forma única. Dentro del componente de la fila, puedes acceder a las propiedades de cada objeto del campus y mostrarlos según sea necesario. En este caso, hemos utilizado las propiedadesCampus_name
ytel_number
para llenar las dos primeras columnas de la tabla. Finalmente, la columna deacción
también se renderiza utilizando el mismo código que los datos estáticos, el cual muestra un icono de edición y enlaces a la página de edición.Esto te permitirá tener una tabla dinámica que se actualiza con nuevos datos de la base de datos MySQL.