0

I am trying to populate a dropdown select option in ReactJS from an API but after several attempts instead of getting the values that I want, I got only a single string with all the values concatenated. I tried to format the JSON file in different ways but without any results.

https://codesandbox.io/s/populate-select-option-fu5gd?fontsize=14

Banjer71
  • 1
  • 1
  • 2

1 Answers1

0

I have changed your iterator for this:

    <select>
      {this.state.colours[1]?
        this.state.colours[1].color.map(item => {
        return <option>{item}</option>;
      })
    : <option>{''}</option>
    }
    </select>

Here is the complete codesandbox code.

Fardenz
  • 103
  • 5
  • Great thank you. Why do you use the condition with this.state.colours[1] ? and why this.state.colours[1].color doesn't work without the conditions? I tried that actually and I don't get why the conditions it is necessary to make it work? – Banjer71 Jul 15 '19 at 17:03
  • @Banjer71 with that condition we check that the object is not undefined, so we can get the color array and map it. – Fardenz Jul 15 '19 at 17:11