I want to invoke a function from one component to another component to open a element, it’s working fine but fires only once, can anyone please help me to get this working.
Component One should open whenever clicked on openmodal button even for n number of times.
function App() {
let [modal, setModal]= useState(false)
return (
<div className="App">
<div>
<One modal={modal}/>
<Two onModal={setModal}/>
</div>
</div>
)
}
export function One({modal}) {
let [open, setOpen] = useState(false)
useEffect(() => {
setOpen(modal)
}, [modal])
const openModal = () => {
setOpen(true)
}
const closeModal = () => {
setOpen(false)
}
return (
<>
<div>
<button onClick={openModal}>Create</button>
{open && <div>MODAL WINDOW<br /><br /><br /><span onClick={closeModal}>CLOSE</span></div>}
</div>
</>
)
}
export function Two({onModal}) {
return (
<>
<div>
<button onClick={() => onModal(true)}>Open Modal</button>
</div>
</>
)
}
I appreciate your response on this query
There are 2 flags that determines whether component <One /> will show up or not —
openin<One />modalin<App />
When you open the model, both open and modal are set to true (due to setState and setState in useEffect).
However, once you “CLOSE” it with the onClick event in <One />, despite open is set to false, the modal is still true.
Why does that matter you might ask? Remember the dependency you have added in the useEffect block, the code inside it only updates when React detects a dependency has been updated. In this case, since modal remains true after we clicked “CLOSE”, the setState inside it will never be trigger. Worse, even if it does, the modal will still go from true to true.
The fix to it is to either pass the setModal component <One /> and add setModal(false) in the closeModal method. Or bubble the control of onClose to the <App />.
Example —
function App() {
let [modal, setModal] = useState(false);
return (
<div className="App">
<div>
<One modal={modal} setModal={setModal} />
<Two onModal={setModal} />
{modal.toString()}
</div>
</div>
);
}
function One({ modal, setModal }) {
let [open, setOpen] = useState(false);
useEffect(() => {
setOpen(modal);
}, [modal]);
const openModal = () => {
setOpen(true);
};
const closeModal = () => {
setOpen(false);
setModal(false);
};
1
Let us trace the flow:
- The three components are mounted – App, One and Two.
- On clicking the button “Open Modal”, the state modal in the component App changes to true.
- This state change causes another rendering of all three components.
As a result, the component One reappears. - Immediately the useEffect triggers in it.
- This causes a state change in component One.
- Please note this change is only in component One.
- The state open becomes true
- It triggers another render of One.
- Now One renders with the Modal Window since open is now true.
- It also causes the Close button visible in it.
- Now pressing the Close button, sets the state to false.
- It causes another render of One, and it results in closure of the modal.
- However, the state in the component App remains true.
- Now clicking the “Open Modal” button, does not change the state since the value already there and the new value – both are the same – true.
- Since there is no change in state in the component, App component does not re-render and the component One remains closed.
- This is the cause of the failure that the component One does not open again.
A fix may be this:
Add inverse data flow from the component One as well.
This will keep the two states – open and modal in sync.
Please see below the modified code and the results.
App.js
import { useState, useEffect } from 'react';
function App() {
let [modal, setModal] = useState(false);
return (
<div className="App">
<div>
<One modal={modal} onModal={setModal} />
<Two onModal={setModal} />
</div>
modal in App : {modal.toString()}
</div>
);
}
function One({ modal, onModal }) {
let [open, setOpen] = useState(false);
useEffect(() => {
setOpen(modal);
}, [modal]);
const openModal = () => {
setOpen(true);
onModal(true);
};
const closeModal = () => {
setOpen(false);
onModal(false);
};
return (
<>
<div>
<button onClick={openModal}>Create</button>
{open && (
<div>
MODAL WINDOW
<br />
<br />
<br />
<span onClick={closeModal}>CLOSE</span>
</div>
)}
</div>
</>
);
}
export function Two({ onModal }) {
return (
<>
<div>
<button onClick={() => onModal(true)}>Open Modal</button>
</div>
</>
);
}
export default App;
Test results:
- Modal opened for the first time
- Modal opened for the second time
0