• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

105
Vistas
Cómo devolver un componente en React

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?

about 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

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>))
about 3 years ago · Juan Pablo Isaza Denunciar

0

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:

  • No almacena los elementos del botón en el estado.
  • en cambio, simplemente almacena los atributos (como la etiqueta/texto del botón) en el estado

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>

about 3 years ago · Juan Pablo Isaza Denunciar

0

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>))
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda