Tengo un modal que quiero que aparezca al hacer clic en un botón. Esto funciona bien, sin embargo, para que se coloque correctamente, necesito mover el componente modal para que se represente en un componente principal. No estoy seguro de cómo hacer esto, ya que no estoy seguro de cómo pasaría el estado al componente donde se crea el clic del botón. Tampoco estoy seguro de si se trata de pasar un estado o usar un botón onClick fuera del componente en el que está definido el estado.
Mi código funciona y hace lo que quiero, pero necesito <DeleteWarehouseModal show={show} /> para estar en el componente principal a continuación. ¿Cómo puedo hacer esto?
El componente principal donde quiero representar mi modal:
function WarehouseComponent(props) { return ( <section> <div> <WarehouseListItems warehouseData={props.warehouseData} /> //Modal component should go here </div> </section> ); }El componente (WarehouseListItems) donde se representa actualmente el modal:
function WarehouseListItem(props) { const [show, setShow] = useState(false); return ( <> //some code necessary to the project, but, irrelevant to this issue <Link> <div onClick={() => setShow(true)}></div> </Link> <DeleteWarehouseModal show={show} /> </> ); }El modal:
const DeleteWarehouseModal = (props) => { if (!props.show) { return null; } return ( //some elements here ); };Sí, puede mover el estado y su controlador en el componente WarehouseComponent y pasar el controlador al componente secundario, que puede cambiar el estado en el componente principal.
Componente de WarehouseComponent : -
function WarehouseComponent(props) { const [show, setShow] = useState(false); const toggleShow = () => { setShow(state => !state); } return ( <section> <div> <WarehouseListItems warehouseData={props.warehouseData} toggleShow={toggleShow} /> <DeleteWarehouseModal show={show} /> </div> </section> ); } Elementos de lista de WarehouseListItems : -
function WarehouseListItem(props) { const {toggleShow} = props; return ( <> //some code necessary to the project, but, irrelevant to this issue <Link> <div onClick={() => toggleShow()}></div> </Link> </> ); }No estoy seguro de si estoy recibiendo la pregunta, pero creo que necesita crear un Portal para la representación adecuada del Modal