how to render select children options after receiving option array from api

[akshayp660]

const next_questionOptions= [
  {key: "Choose Next Question" , Value: ''}
  ]

this is the value that i am passing to options={next_questionOptions} but values of next_questionOptions changing after api call

const getQuestionOptions = async ()=> {
   await axios.get(baseURL+`/api/questionnaires?access_token=${user_Access_token}`)
    .then((res)=>{
    res.data.map((item)=>{
    next_questionOptions.push({key: item.question , value: item.question});
    })
    })
    .catch((err)=>{
      console.log(err)
    })
  }

so what I wanted is to dynamically change the value of options as soon as next_questionOptions updates after API call

[johnrom]

@akshayp660 you can use React State for this, like:

const MyOptionsField = (props) => {
  const [options, setOptions] = React.useState([
    { key: "Choose Next Question" , value: '' }
  ]);
  getQuestionOptions.then(result => setOptions({
    ...options,
    ...res.data.map((item)=> ({
      key: item.question, 
      value: item.question
    })
  )});

  return <Field type="select" name={props.name}>
    {options.map(option => 
      <option key={option.key} value={option.value}>{option.key}</option>
    )}
  </Field>
};