Este es mi first.js archivo.js
import Second from "./second"; function ClickHandler() { return ( <div> <Second></Second> </div> ); } function First() { return ( <div> <div>This is first</div> <div> <button onClick={ClickHandler}>Click it</button> </div> </div> ); } export default First; Este es mi archivo second.js
function Second(){ return( <div> <div> This is Second </div> </div> ); } export default Second; Quiero mostrar el contenido del archivo second.js cuando se hace clic en el botón. ¿Pero esto no está funcionando como se esperaba? ¿Alguna solución para esto? Por favor...
import React, { useState } from 'react' import Second from "./second"; function First() { const [secondComponentVisibility, setSecondComponentVisibility] = useState(false); const ClickHandler = () => { setSecondComponentVisibility(true) } return ( <div> <div>This is first</div> <div> <button onClick={ClickHandler}>Click it</button> </div> {secondComponentVisibility && <Second/>} </div> ); } export default First;function First() { const [showSecond, setShowsecond] = useState(false); return ( showSecond ? <SecondComponent/> : <div> <div>This is first</div> <div> <button onClick={()=>setShowsecond(true)}>Click it</button> </div> </div> ); } export default First;espero que esto ayude
first.js
import React, { useState } from react import Second from './second' function First() { const [IsSecondShowing, SetIsSecondShowing] = useState(false) return ( <div> <div>This is first</div> {IsSecondShowing ? <Second /> : null} <div> <button onClick={() => SetIsSecondShowing(prev => !prev)}> Click it </button> </div> </div> ) } export default First second.js
import React from 'react' function Second() { return ( <div> <div>This is Second</div> </div> ) } export default Second