CODEWITHSUNDEEP
reactjs
luckydev
luckydev

Reputation: 149

How to change bool in an array?

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>

Upvotes: 1

Views: 230

Answers (3)

Evgenii Klepilin
Evgenii Klepilin

Reputation: 695

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
})

Upvotes: 0

Amit Chauhan
Amit Chauhan

Reputation: 6869

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

Upvotes: 2

Rishi Jodha
Rishi Jodha

Reputation: 186

You can try something like this:

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

Upvotes: 0

Related Questions