Mapping over array of objects - unable to get values into dropdown

Question

The title pretty much explains my issue. I mocked up some data I need to display in a dropdown, the dropdown component is from SUIR

mock.onGet("/slotIds").reply(200, {
  data: {
    slotIds: [{ id: 1 }, { id: 2 }, { id: 3 }]
  }
});

I'm updating state with the fetch of the data

  const { data } = await axios.get("/slotIds");
  console.log("Slot IDs --> ", data);
  const slotIds = data.data;
  this.setState({ slotIds: slotIds });
  console.log(this.state.slotIds);
  //the above log outputs [Object, Object, Object] so slotIds is in fact an array

Then I'm mapping over that values to render the id in a dropdown

        options={slotIds.map(id => {
          return {
            key: id.id,
            text: id.id,
            value: id.id
          };
        })}

Can't quite get it to work, am I mapping the values incorrectly or returning the wrong values?

I have a codesandbox that reproduces the issue. You will need to click on the the Login button at the top of the splash page. Select the Slot Sec Officer radio button, look at the console it will show the successful api call and how the slotIds state is updated. I have commented out the .map function because it is causing the component not rendering when Slot Sec Officer option is chosen.

The entire Login code is inside /components/Login.js. The class SlotSecIdInputs contains the api call and the actual <Dropdown> component that has the map function.

The Reason · Accepted Answer · 2019-06-29 20:12:55Z

1

You have a couple of mistakes in a SlotSecIdInputs:

You haven't defined your state slotIds in a constructor
The default state should be defined as an array, cuz you mapping over fetched items which later stored as an array
You should control the fetch loading.

Initially when the component is just rendered you don't have slotIds state, so you cant map over it and you get an error. After you fetched slotIds you should make sure it's not empty and after it do mapping over it.

Hope it will help you.

answered Jun 29, 2019 at 20:12

The Reason

8,0135 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DJ2 Over a year ago

Wow I can't believe I missed your first/second point. Lots of similar variable names and I just missed it. What do you mean by control the fetch loading?

DJ2 Over a year ago

The slotId dropdown when selected is updating the value to formik state but it's not reflected in the actual dropdown itself

Collectives™ on Stack Overflow

Mapping over array of objects - unable to get values into dropdown

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related