Soy muy nuevo en el desarrollo de React y Front End.
Recientemente me encontré con algo que me confundió.
¿Por qué el siguiente fragmento de código funcionaría correctamente?
import React, { useState } from "react"; import "./styles.css"; import Button from "./Button"; export default function App() { const [buttonsOnCanvas, setButtonsOnCanvas] = useState([]); return ( <div className="App"> <Button event={() => { setButtonsOnCanvas([...buttonsOnCanvas, <Button />]); }} /> <div className="canvas">{buttonsOnCanvas}</div> </div> ); }pero no esto:
import React, { useState } from "react"; import "./styles.css"; import Button from "./Button"; export default function App() { const [buttonsOnCanvas, setButtonsOnCanvas] = useState([]); function handleAddButtonClick() { setButtonsOnCanvas([...buttonsOnCanvas, <Button />]); } return ( <div className="App"> <Button onClick={() => handleAddButtonClick()} /> <div className="canvas">{buttonsOnCanvas}</div> </div> ); }Código para Button.js: importar React desde "react";
export default ({ name = "Add Button", event }) => ( <button onClick={event}>{name}</button> );La diferencia parece estar en los atributos onClick vs event. En la versión de evento, al hacer clic en el botón inicial instanciado dentro del navegador web, se agregarán constantemente nuevas instancias de botón. Con onClick, no pasa nada.
El accesorio 'onCLick' no existe en su componente Button, por eso no funciona. Cambia tu Button.js
export default ({ name = "Add Button", event }) => ( <button onClick={event}>{name}</button> );por
export default ({ name = "Add Button", onClick }) => ( <button onClick={onClick}>{name}</button> );Ahora puede usar su botón con onClick en lugar de evento. Luego, en su componente de aplicación
export default function App() { const [buttonsOnCanvas, setButtonsOnCanvas] = useState([]); function handleAddButtonClick() { setButtonsOnCanvas([...buttonsOnCanvas, <Button />]); } return ( <div className="App"> <Button onClick={handleAddButtonClick} // Better avoid anonymous function /> <div className="canvas">{buttonsOnCanvas}</div> </div> ); }