I having two files header.js and upload.js. In upload.js I have a popup modal which should be open when I click upload button in the header.js
So basically I want to call setOpened function present in upload.js from header.js
header.js
import React from 'react'
const Header = () => {
return (
<div>
<Link
data-bs-toggle="modal"
onClick={() => setOpened(true)}
role="button"
>Upload</Link>
</div>
)
}
export default Header
upload.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 Upload
In App.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;
To echo @I-vasilich-I's comment about lifting state up, you should move your modal open state to a higher level (like in App) and pass that state to each child that needs it.
For example
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 />
</>
);
};
(note make sure you add imports)