Formatting the received data from an api into an array React Axios

Question

I am new to react and I have designed a drop-down menu using react-select

const Locations = [
  { label: "Albania", value: 355 },
  { label: "Argentina", value: 54 },
  { label: "Austria", value: 43 },
  { label: "Cocos Islands", value: 61 },
  { label: "Kuwait", value: 965 },
  { label: "Sweden", value: 46 },
  { label: "Venezuela", value: 58 }
];

<Select placeholder='Select from pre-created Tags 'onChange={handleDropDown('Tags')} defaultValue={values.Tags} required options={Locations}/>

and I have received some data drom an api using axios:

 state = {
    locations:[],
    departments: [],
    tagsList:[],
  }

axios.get('/api/jobs/list-tags',{headers:headers}).then(respo =>{
      console.log(respo.data)
      this.setState({
        tagsList:respo.data
      })
      console.log(this.state.tagsList)

the data received from the api looks like this:

Object { id: 1, name: "MongoDB" }
Object { id: 2, name: "JavaScript" }

I want to replace the hardcoded data in Locations array with the info received from the api in the same format. (instead of { label: "Albania", value: 355 }, { id: 2, name: "JavaScript" }). how can I achieve this?

Aprillion · Accepted Answer · 2020-05-03 10:32:32Z

2

You can map the response data:

      this.setState({
        locations: respo.data.map(t=>({label: t.name, value: t.id}))
      })

edited May 3, 2020 at 10:32

Aprillion

22.4k6 gold badges59 silver badges94 bronze badges

answered May 3, 2020 at 9:43

Vahid Alimohamadi

5,9883 gold badges25 silver badges42 bronze badges

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

6 Comments

lydal Over a year ago

yeah but what would I put here? options={Locations}

Vahid Alimohamadi Over a year ago

I mean locations not tagsList, my mistake.

lydal Over a year ago

yes but since this is in the setState, it gives me an error if I write it like options={locations} for example. ('locations' is not defined.) should it be like this.state.locations?

Vahid Alimohamadi Over a year ago

Yes, It should be this.state.locations

Aprillion Over a year ago

@VahidAlimohamadi the introduction to the solution sounded condescending, I replaced it with a link to documentation...

|

Collectives™ on Stack Overflow

Formatting the received data from an api into an array React Axios

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related