Solo quiero saber cómo mostrar cualquier cosa en un cuerpo HTML cuando se hace clic en el botón. ¿Hay algo como echo en php?
este es mi código appTodo.js....
import React, { useState } from 'react' export default function AddTodo() { const [input, setInput] = useState(""); const onChange = (e) => { setInput(e.target.value) } const handleOnClick = () => { console.log(input) setInput("") } return ( <div className='container my-3 col-6'> <form> <input className="form-control" onChange={onChange} type="text" placeholder="What to do?" value={input} /> <button id='addbtn' onClick={handleOnClick} type="button" className="btn btn-dark my-3">Add</button> </form> </div> ) }Solo necesita crear una variable para mantener el estado de visibilidad del div.
import React, { useState } from 'react' export default function AddTodo() { const [input, setInput] = useState(""); const [divVisibility, setDivVisibility] = useState(false); const onChange = (e) => { setInput(e.target.value) } const handleOnClick = () => { setInput("") setDivVisibility(true) } return ( <div className='container my-3 col-6'> <form> <input className="form-control" onChange={onChange} type="text" placeholder="What to do?" value={input} /> <button id='addbtn' onClick={handleOnClick} type="button" className="btn btn-dark my-3">Add</button> </form> {divVisibility && <div> Your content </div> } </div> ) }Este código crea un estado que se puede cambiar entre verdadero y falso haciendo clic en el botón. Cuando es falso "componentenet" = nulo, y cuando es verdadero "componente" = (su componente).
const [visible, setVisible] = useState(false); function makeVisible() { if(visible === false){ setVisible(true) } else setVisible(false); } const component = visible == true ? <h1>SHOWN</h1> : null; const buttonString = visible == true? "UnShow" : "Show" return ( <div className="App"> <h1>Hello World!</h1> {component} <button onClick={makeVisible} >{buttonString}</button> </div> ); }