How to change bool in an array?

Question

How to access a specific element in an array and change its value to the opposite? In order not to duplicate the code, I want to make the display of modal windows in this way

const [visiblePopup, setVisiblePopup] = useState([
  {
    modalUsers: false,
    modalDetails: false,
    modalWarning: false,
    modalUpdate: false
  }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Possible duplicate of: https://stackoverflow.com/questions/11604409/how-to-toggle-a-boolean — Zander, Jan 29 '20 at 11:24

score 2 · Accepted Answer · answered Jan 29 '20 at 11:25

Instead of having array just use object and create function to toggle your state.

const [visiblePopup, setVisiblePopup] = useState({
  modalUsers: false,
  modalDetails: false,
  modalWarning: false,
  modalUpdate: false
});

togglePopup = name => setVisiblePopup(prevVisiblePopup => ({
  ...visiblePopup,
  [name]: !prevVisiblePopup[name]
})

togglePopup('modalUpdate'); // to toggle modalUpdate

score 0 · Answer 2 · answered Jan 29 '20 at 11:25

0

You can try something like this:

setVisiblePopup([...visiblePopup, modalUsers: true])

answered Jan 29 '20 at 11:25

Rishi Jodha

161
4

score 0 · Answer 3 · answered Jan 29 '20 at 11:38

You can have separate functions to deal with each one of those modal toggles:

const [visiblePopup, setVisiblePopup] = useState({
  modalUsers: false,
  modalDetails: false,
  modalWarning: false,
  modalUpdate: false
});

toggleModalUsers = () => setVisiblePopup(prevState => ({
  ...visiblePopup,
  modalUsers: !modalUsers
})

toggleModalDetails = () => setVisiblePopup(prevState => ({
  ...visiblePopup,
  modalDetails: !modalDetails
})

toggleModalWarning = () => setVisiblePopup(prevState => ({
  ...visiblePopup,
  modalWarning: !modalWarning
})

toggleModalUpdate = () => setVisiblePopup(prevState => ({
  ...visiblePopup,
  modalUpdate: !modalUpdate
})

How to change bool in an array?

3 Answers3