Tengo un componente donde necesito pasar un elemento HTML como apoyo a otro elemento
const MyText = () => { return ( <> <h1>Sample heading</h1> </> ) } return ( <div> <MyComponent Text={MyText} onClose={() => setShow(false)} show={show} /> </div> );MiComponente.js
export default function MyComponent(props) { return ( <> {props.Text} </> ); }Problema: no obtengo nada renderizado en la pantalla. ¿Me estoy perdiendo de algo?
Hay dos maneras.
Opción 1: pasar un tipo de componente (o clase si viene del fondo OOP)
const MyText = () => { return ( <> <h1>Sample heading</h1> </> ) } return ( <div> <MyComponent Text={MyText} onClose={() => setShow(false)} show={show} /> </div> ); const MyComponent = ({ Text }) => { return ( <> <Text /> </> ); }Opción 2: pasar un componente (o una instancia si viene del fondo OOP)
const MyText = () => { return ( <> <h1>Sample heading</h1> </> ) } return ( <div> <MyComponent text={<MyText />} onClose={() => setShow(false)} show={show} /> </div> ); const MyComponent = ({ text }) => { return ( <> {text} </> ); }