how to set select option which has already been selected in react js?

Question

I have a table that has an input amount if input = 0 I enter it into a new state to be displayed later in the modal, if the no order button is clicked, the modal appears with a filtered list, in the modal list there is a select option to select reason when it works in submit the problem is if I click the no order button more than 2x the value of the select option that has been selected is lost and must be set again how do I check if the select is not lost?

const handleToggle = () => {
 if (state.tab === 'tab-1') {
  const productFocus = [...state.productFocus]
  const productFocusNoOrder = [...state.productFocusNoOrder]


  let focus = productFocus.filter(item => item.orderQuantity === 0 || isNaN(item.orderQuantity)).map(a => {
    console.log('a', a)
    return Object.assign({}, {
      ...a,
      reason: state.selectReason

    })
  })
  return setState(prevState => {
    return {
      ...prevState,
      openModal: !state.openModal,
      productFocusNoOrder: focus
    }
  })

this is button no order

<button onClick={handleToggle} >
    {state.isLoading ? 'loading..' : 'No Order'}
</button>

basically I want if the value of the select that has been selected doesn't disappear if I click the no order button a few times

this is an example of a table image that has an input value

this is a list of results from filters with input value = 0

Answer 1

The problem is that when you unmount a component you lose all its states. I can see two possible solutions:

• you could hide the modal via CSS, instead of unmounting it

• you could lift up the selected options to a parent component that is not being unmounted and then pass them down as props to the modal every time it's being opened