Tengo dos archivos header.js y upload.js. En upload.js tengo un modal emergente que debería estar abierto cuando hago clic en el botón de carga en el header.js
Básicamente, quiero llamar a la función setOpened presente en upload.js desde header.js
encabezado.js
import React from 'react' const Header = () => { return ( <div> <Link data-bs-toggle="modal" onClick={() => setOpened(true)} role="button" >Upload</Link> </div> ) } export default Headercargar.js
import React from 'react' const [opened, setOpened] = useState(false); const Upload = () => { return ( <div> <Modal opened={opened} onClose={() => setOpened(false)} title="Introduce yourself!" > {/* Modal content */} </Modal> </div> ) } export default UploadEn aplicación.js
import Header from './component/Header'; import Footer from './component/Footer'; import Upload from './component/Upload'; function App() { return ( <Header/> <Routes> <Route path="/upload" element={<Upload/>}/> </Routes> <Footer/> ); } export default App;Para hacer eco del comentario de @ I-vasilich-I sobre levantar el estado , debe mover su estado abierto modal a un nivel superior (como en la App ) y pasar ese estado a cada niño que lo necesite.
Por ejemplo
const Header = ({ openModal }) => ( <div> <Link data-bs-toggle="modal" onClick={openModal} role="button"> Upload </Link> </div> ); const Upload = ({ opened, closeModal }) => ( <div> <Modal opened={opened} onClose={closeModal} title="Introduce yourself!"> {/* Modal content */} </Modal> </div> ); const App = () => { const [opened, setOpened] = useState(false); return ( <> <Header openModal={() => setOpened(true)} /> <Routes> <Route path="/upload" element={<Upload opened={opened} closeModal={() => setOpened(false)} />} /> </Routes> <Footer /> </> ); };(nota, asegúrate de agregar importaciones)