Not able to populate the select drop down with JSON in reactJS - json

Question

I'm trying to fetch key "name" and its corresponding value using JSON in the drop down "Select" of reactJS. But it does not work when I'm executing my code. I have attached my code, Kindly have a look!
I have tried using componentDidMount to fetch the data by making API call. I am a beginner so I'm trying to figure out what ways can make it work.
class devName extends Component {
state = {
names: [],
selectedName: "",
validationError: ""
}
componentDidMount() {
fetch("http://127.0.0.1:8080/dashboard/get_names")
.then((res) => {
return res.json();
})
.then(data => {
let namesFromAPI = data.map(name => { return { value: name, display: name } })
this.setState({ names: [{ value: '', display: '(Select the site)' }].concat(namesFromAPI) });
}).catch(err => {
console.log(err);
});
}
render() {
return (
<div className="wrapper">
<div className="form-wrapper">
<Toolbar />
<form className="form">
<label className="label1">Select Name from the drop down</label> <hr />
<div>
<Select
value={this.state.selectedName}
onChange={(e) => this.setState({selectedName: e.target.value, validationError: e.target.value === "" ? "You must select a site name" : ""})}>
{/* placeholder="Loading Site List..." > */}
{this.state.names.map((name) => <option key={name.value} value={name.display}>{name.display} </option>)}
</Select>
<div style={{color: 'red', marginTop: '5px'}}>
{this.state.validationError}
</div>
<br />
</div>
<label className="label1">Create New Name From Template</label>
<hr />
<div className="addButton">
<button type="Submit">Add</button> <hr />
</div>
<div className="submitButton">
<button type="submit">Submit</button>
</div>
</form>
</div>
</div>
);
}
}
export default devName;
JSON CODE LOOKS LIKE:
[
{
"type": "state",
"id": 2131,
"temporaryEle": {},
"name": "First Unit#1234 TON" .. and so on
}
]
There is no error message. Though the desired result should be "Select Drop Down populates with : " Select one of the name please"
First Unit#1234 TON
Second Unit#8934 QON
Third Unit#6534 JON

Answer 1

Edit:
I've read one of your comments and it seems like you're having CORS issues with fetch.
Add the baseurl as proxy in your package.json file
// Package.json
{
...other configs,
"proxy": "http://127.0.0.1:8080"
}
Then you'd call your fetch like so: fetch('/dashboard/get_names').then((res) => {...})
Resource for you to look at:
https://create-react-app.dev/docs/proxying-api-requests-in-development/
Old:
According to your JSON data, you might have to destucture a level deeper on your object while mapping the data in componentDidMount
let namesFromAPI = data.map(({name}) => {
return { value: name, display: name }
})
// OR
let namesFromAPI = data.map(name => {
return { value: name.name, display: name.name }
})

Answer 2

Use destucturing on name parameter, you can implicitly return object from arrow function when you wrap it in () data.map(({name}) => ({ value: name, display: name }))