Quiero hacer que la fila de mi tabla sea dinámica para que pueda agregar automáticamente nuevos datos de la base de datos MySQL, pero no sé cómo. ¿Me puedes ayudar?
Aquí están mis datos estáticos que quería hacer dinámicos.
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' /></Link> </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' /> </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' /> </Tooltip> </div> }, ] };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 CampusPagePara hacer una tabla dinámica, simplemente asigne las filas de la tabla:
<table> <tr> <th>...</th> <th>...</th> <th>...</th> </tr> { campusValues.map(value => ( <tr key={...}> <td>{value.id}</td> <td>{value.name}</td> <td>...</td> </tr> )) } </table>