fuction not returning a list of radio button Reactjs- ReactBootstrap

Question

I am working on a dash board, that fetches data from acuity scheduling. I am making a form and using a function to get list of radio button: following array has it, just to clarify. It takes time to get the value in from the API so I have used setTimeout, in the function:

setTimeout(() => {
    return timeForID.map( obj => {
      return (<Radio value={obj.date}>{obj.hours}:{obj.mins}</Radio>);
    })
  }, 500)

I am getting a blank space in the place of radio buttons.

score 0 · Answer 1 · answered Jul 24 '18 at 06:46

There are a lot of answers in JavaScript out there about working with the event loop and callbacks -- See: How do I return the response from an asynchronous call?

Essentially, your return inside of setTimeout doesn't go anywhere.

In order to trigger another render in your component, you will have to use setState. You can call setState after your API call completes -- you shouldn't have to use setTimeout. Let's say you're using fetch to get the API:

fetch(apiUrl).then(response => response.json()).then(dates => setState({ dates }))

Now in your render function you can have:

{this.state.dates.map(({ date, hours, mins }) => (
  <Radio value={date}>{hours}:{mins}</Radio>
)}

Initialize the dates property of state to an empty array to prevent errors on the initial load.

fuction not returning a list of radio button Reactjs- ReactBootstrap

1 Answers1