CODEWITHSUNDEEP
javascriptarraysreactjsaxios
lydal
lydal

Reputation: 930

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

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?

Upvotes: 0

Views: 262

Answers (1)

Vahid Alimohamadi
Vahid Alimohamadi

Reputation: 5858

You can map the response data:

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

Upvotes: 2

Related Questions