Tengo este componente React Material-UI implementado en Typescript:
<Grid container direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid item xs={5}> <Box m={5} pl={10}> ...... some body text.......... </Box> </Grid> </Grid> ¿Cómo puedo generar varios Grid item a partir de una matriz y agregar una barra de desplazamiento horizontal para enumerarlos si la lista es demasiado grande?
Puede usar el método de map para representar un componente para cada elemento de su matriz. En cuanto al desplazamiento horizontal, hay varias formas de hacerlo, pero una forma que he descubierto que funciona bien es colocar los elementos en un contenedor de caja flexible y poner ese contenedor dentro de otro contenedor que se desplaza horizontalmente. Además, con este enfoque, deberá establecer width: fit-content en el componente de la fila para que se expanda fuera del componente principal.
Digamos que sus datos se almacenan en una matriz llamada items y el componente para cada uno es GridItem . Entonces podemos hacer esto:
function App() { const items = [{name: "One"}, {name: "Two"}, {name: "Three"}, {name: "Four"}, {name: "Five"}, {name: "Six"}]; return ( <div className="scroll-wrapper"> <div className="row"> {items.map(e => <GridItem name={e.name}/>)} </div> </div> ) } function GridItem({ name }) { return ( <div className="grid-item"> {name} </div> ) } ReactDOM.render(<App/>, document.querySelector("#root")); .scroll-wrapper { overflow-x: scroll; padding-bottom: 1rem; /* for the scroll bar */ } .row { display: flex; flex-direction: row; width: fit-content; } .grid-item { width: 30vw; padding: 0.25rem 0.5rem; border: 1px solid black; margin-right: 1rem; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"/>