tengo un componente de botón de material UI. Lo que quiero hacer es hacer clic en un botón y me muestra un nuevo botón en la pantalla. Eso fue lo que hice
const [button, setButton] = useState([]); function addButton(){ let newObj = { button: <Button variant="contained"> A Button</Button>, }; setButton([...button, newObj])}
Y luego en la función principal return lo hice
{button.length !== 0 ? ( button.map((item) => { <div>{item.button}</div>; }) ) : ( <div>Hello</div> )}¿Qué estoy haciendo mal?
Cuando usa una lambda multilínea con llaves, necesita un return ...
button.map((item) => { return (<div>{item.button}</div>); })Alternativamente, puede omitir las llaves...
button.map((item) => (<div>{item.button}</div>))Esta respuesta intenta abordar la siguiente declaración del problema:
Pero, ¿cómo podría hacer clic en un botón y generar tantos botones como hice clic?
El siguiente fragmento proporciona una demostración de cómo se puede representar un nuevo botón cuando el usuario hace clic en un botón existente. Esto amplía el siguiente comentario.
Se puede crear un nuevo botón al hacer clic en un botón existente sin necesidad de mantener el componente en estado.
Tenga en cuenta:
Fragmento de código
const {useState} = React; const MyButton = ({ btnLabel, btnName, handleClick, isDisabled, ...props }) => ( <button class="myBtn" onClick={handleClick} name={btnName} disabled={isDisabled} > {btnLabel} </button> ); const MagicButtons = () => { const [btnText, setBtnText] = useState(""); const [disableBtns, setDisableBtns] = useState(false); const [myButtons, setMyButtons] = useState(["A Button"]); const handleClick = () => setDisableBtns(true); return ( <div> { disableBtns && ( <div class="myInput"> <input value={btnText} onChange={e => setBtnText(e.target.value)} /> <button onClick={() => { setMyButtons(prev => ([...prev, btnText])); setBtnText(""); setDisableBtns(false); }} > Add New Button </button> </div> ) } { myButtons.map((txt, idx) => ( <MyButton handleClick={handleClick} btnName={idx} isDisabled={disableBtns ? "disabled" : ""} btnLabel={txt} /> )) } </div> ); }; ReactDOM.render( <div> DEMO <MagicButtons /> </div>, document.getElementById("rd") ); .myBtn { margin: 15px; } .myInput > input { margin: 15px; } <div id="rd" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>Olvidaste devolver el componente en la función de mapa de esta manera
{button.length !== 0 ? ( button.map((item) => { return (<div>{item.button}</div>); }) ) : ( <div>Hello</div> )}la función de mapa sin la palabra clave 'return' no debe tener el corchete { } como este
button.map((item) => (<div>{item.button}</div>))