Estoy tratando de crear un elemento de cuadrícula mui dinámico cuando se presiona un botón en un componente de reacción. Cuando traté de crear let newGrid = document.createElement('Grid') no funciona como una creación div normal.
¿Alguna sugerencia?
Fragmento de código actual:
return ( <> <button onClick={addRow}>Add Row</button> <Grid container className='v-timeline-container'> <Grid xs={12} item className="v-timeline-item v-center v-border"> <TextItems /> </Grid> </Grid> </> )Lo que estoy tratando de lograr dinámicamente:
return ( <> <button onClick={addRow}>Add Row</button> <Grid container className='v-timeline-container'> <Grid xs={12} item className="v-timeline-item v-center v-border"> <TextItems /> </Grid> <Grid xs={12} item className="v-timeline-item v-center v-border"> <TextItems /> </Grid> </Grid> </> )React usa un VDOM para realizar un seguimiento de las cosas internamente, manipular el DOM directamente usando las API de DOM se considera peligroso. Lo que debe hacer esto algo como esto.
function App(){ // you probably want to track the text items in each row, // so use an array of objects const [gridItems, setGridItems] = useState([]); // this function adds a new grid item const onClick = () => { setGridItems([...gridItems, {text: "new row", id: gridItems.length + 1}]); }; return ( <> <button onClick={onClick}>Add Row</button> <Grid container className='v-timeline-container'> { gridItems.map(item => ( <Grid xs={12} item className="v-timeline-item v-center v-border"> <TextItems>{item.text}</TextItems> </Grid> )) } </Grid> </> ); }Usar setState es una solución. Incrementa un número en el estado para crear una matriz a partir de él. En su caso, seguramente enviará nuevos datos a una matriz cuando haga clic en el botón. Pero se entiende la idea.
import React, { useState } from 'react'; import { Grid } from '@mui/material' const ListItems = () => { const [items, setItems] = useState(1); const addRow = () => { setItems((prev) => prev + 1) } return ( <> <button onClick={addRow}>Add Row</button> <Grid container className='v-timeline-container'> { [...Array(items).keys()].map((key) => ( <Grid xs={12} item className="v-timeline-item v-center v-border"> <p>{key + 1} row</p> </Grid> )) } </Grid> </> ) } export default ListItems