Cómo crear un botón que una vez que haga clic en el botón mostrará solo texto usando el gancho de reacción
const WelcomeButton = (props) => { const[welcomeBtn, setwelcomeBtn] = useState() const handelClick = () => { if() { retun <p>Hi John</p> } } return ( <div> <button onClick={handelClick}> Welcome </button> </div> ) ; };Sugiero usar un estado que rastree que se ha hecho clic en el botón y actualizar/alternar este valor en la devolución de llamada de handleClick . Representar condicionalmente el botón o el texto de bienvenida en función de este estado.
const WelcomeButton = (props) => { // initial state true to show button const [welcomeBtn, setWelcomeBtn] = React.useState(true); const handelClick = () => { // toggle false to hide button and display welcome message setWelcomeBtn(false); }; return ( <div> {welcomeBtn ? ( <button onClick={handelClick}> Welcome </button> ) : ( <p>Hi John</p> )} </div> ); }; const rootElement = document.getElementById("root"); ReactDOM.render( <WelcomeButton />, rootElement ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root" />