javascript - How to submit data as an array of objects in react

Question

I'm new to React so this might be a very silly question but I just can't seem to get it. I have a form which has a multi select (imported react-select) and when I select multiple options I want to sent it as an array of objects. Instead I'm sending it as an array of array of objects. I want help to sent it as an array of objects instead of array of array of objects.

import React from "react"
import Select from 'react-select'

class Skills extends React.Component{
    state = {
        skill: []
    }

  skillsDropdown = [
    { value: 'React', label: 'React' },
    { value: 'Vue', label: 'Vue' },
    { value: 'Angular', label: 'Angular' },
    { value: 'Java', label: 'Java' },
  ]
    handleChangeSkills = skill => {
        this.setState({
            skill
        })
        console.log(skill);
    }

    handleSubmit = (event) => {
        event.preventDefault();
        const userSkill= {
            skills: this.state.skill.map((item) => [{
                 skillName: item.value
            }])  
        }
       axios.post("http://localhost:8080/api", userSkill)
            .then(response => {
                console.log("User profile details from backend: ", response.data);
            })
       
    }

      render(){
        return (
            <>
                <h2>Skills</h2>
                <label>Please include 3-5 of your top skills to help you stand out.</label>
                <label>
                <Select 
                    options={this.state.skillsDropdown} 
                    onChange={this.handleChangeSkills}
                    isMulti=true
                    value={skill}
                />
                </label>
                    
                <button className="Next" onSubmit={this.handleSubmit}>Submit</button>
            </>
        )
    }

}

export default Skills;

When i'm submitting the data I'm getting is

skills: [[{skillName: "React"}], [{skillName: "Vue"}]]

What I want is this

skills: [{skillName: "React"}, {skillName: "Vue"}]

Can anyone please help me with this. TIA

question from:https://stackoverflow.com/questions/65617500/how-to-submit-data-as-an-array-of-objects-in-react

Answer 1

The culprit is in your map function. Map automatically adds all its results to an array, and you're adding another array around it.

const userSkill= {
                                               // culprit here
            skills: this.state.skill.map((item) => [{
                 skillName: item.value
            }])  
        }

Removing the [] will fix it.

const userSkill= {                         
            skills: this.state.skill.map((item) => ({
                 skillName: item.value
            }))  
        }