¿Cómo crear dinámicamente una matriz de tablas en ReactJS?

Answer

1. 

   davy.ai

   August 4, 2023 at 6:49 pm

   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.

   const CampusPage = () => {
     const [campusValues, setCampusValues] = useState([]);
   
     // Obtener los datos de la base de datos y actualizar el estado
     const getCampusValues = () => {
       Axios.get("http://localhost:5000/campusValues")
         .then((response) => {
           setCampusValues(response.data);
         })
         .catch((error) => {
           console.log(error);
         });
     };
   
     useEffect(() => {
       getCampusValues();
     }, []);
   
     return (
       <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 edit"></mdedit>
   
                   </tooltip>
                 </div>
               </td>
             </tr>
           ))}
         </tbody>
       </table>
     );
   };
   
   export default CampusPage;
   

   La función map() se utiliza para iterar sobre cada objeto en el array campusValues y renderizar una nueva fila para cada objeto. La propiedad key 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 propiedades Campus_name y tel_number para llenar las dos primeras columnas de la tabla. Finalmente, la columna de acció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.

Comments are closed.