Estoy trabajando en el sitio web de reserva de entradas para el cine. Quiero hacer un diseño de cuadrícula de 4x7. Entonces, lo que pensé es que crearía un componente de botón y lo repetiría en bucle varias veces.
Pseudocódigo:
for(var i=0;i<4;i++){ for(var j=0;j<7;j++){ button Component(); } newline Component(); }Pero este tipo de cosas no son compatibles con reactjs. Entonces, ¿qué puedo hacer para la implementación de lo anterior? Además, cuando se hace clic en un botón, quiero cambiar su color porque le he dado una ID al Componente del botón para poder hacerlo mediante la manipulación DOM, pero ¿cómo hacerlo usando UseState?
EDITAR: Terminé con la parte de la matriz, pero ¿qué pasa con el cambio de color ahora? Intenté DOM pero devuelve NULL
CÓDIGO:
const items=[]; for(let i=1;i<=20;i++){ let style={ backgroundColor:"White" }; items.push(<button className="btn btn-danger" onClick={()=>changeColor(i)} style={style} id={"button"+i}/>); } function changeColor(index) { document.getElementById("index").style.backgroundColor="Green"; } This Thing returns NULL i Do not know whyNo se recomienda utilizar la manipulación directa de DOM; en su lugar, debe aprovechar el ciclo de renderizado reactivo que proporciona React.
Aquí hay un fragmento que declara un componente Button que maneja su propio estado interno como ejemplo. Múltiples Button se representan dentro de un map() en el padre, y cada botón controla su propio estado active .
const { useState } = React; function App() { return ( <div> {[1,2,3].map(n =>( <Button key={n} label={'Button' + n} /> ))} </div> ) } function Button({label}) { const [active, setActive] = useState(false); const handleClick = (e) => { setActive(a => !a); }; return ( <button type='button' className={active ? 'active' : ''} onClick={handleClick} > {label} </button> ) } ReactDOM.render(<App />, document.getElementById('root')); .active { background-color: tomato; } <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <div id='root'></div>Pero, por lo general, los botones se usarán para interactuar directamente con el estado del padre, en cuyo caso el controlador de clics y la lógica del estado se declararán en el padre y las propiedades relevantes se transmitirán a los hijos.
const { useState } = React; function App() { const [buttons, setButtons] = useState([ {id: 1, label: 'Button 1', active: false}, {id: 2, label: 'Button 2', active: false}, {id: 3, label: 'Button 3', active: false}]); const handleClick = (buttonId) => { setButtons(buttons => buttons.map(b => b.id === buttonId ? {...b, active: !b.active} : b)); }; return ( <div> {buttons.map(b =>( <Button key={b.id} id={b.id} label={b.label} onClick={handleClick} active={b.active} /> ))} </div> ) } function Button({label, id, onClick, active}) { return ( <button type='button' onClick={() => onClick(id)} className={active ? 'active' : ''} > {label} </button> ) } ReactDOM.render(<App />, document.getElementById('root')); .active { background-color: tomato; } <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <div id='root'></div>