Hey there! I'm new to React and I'm attempting to create a multiple select option using the Axios GET method. However, I've encountered an issue with adding multiple select options in this file. I've been trying to achieve this with checkbox code below, but I keep receiving an error stating that a string is being called on the onChange function. Additionally, the checkboxes are not opening due to this error.
List item
import React, { Component, Fragment } from "react";
import axios from "axios";
class Home extends Component {
state = {
users: []
};
componentDidMount() {
axios.get("https://jsonplaceholder.typicode.com/users").then(res => {
console.log(res);
this.setState({
users: res.data
});
});
}
showCheckboxes = () => {
let expanded = false;
const checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
};
onChangeValue = e => {
const value = e.target.value;
debugger;
};
render() {
const { users } = this.state;
const nameList = users.length ? (
<select className="custom-select">
{users.map((user, i) => {
return (
<option key={i} value={user.name}>
{" "}
{user.name}
</option>
);
})}
</select>
) : (
"No Data"
);
const usernameList = users.length ? (
<select className="custom-select">
{users.map((user, i) => {
return (
<option key={i} value={user.username}>
{user.username}
</option>
);
})}
</select>
) : (
"No Data"
);
const emailList = users.length ? (
<select className="custom-select">
{users.map((user, i) => {
return (
<option key={i} value={user.email}>
{user.email}
</option>
);
})}
</select>
) : (
"No Data"
);
return (
<Fragment>
{nameList}
<hr />
{usernameList}
<hr />
{emailList}
<hr />
<div className="multiselect">
<div className="selectBox">
<select>
<option>Select an option</option>
</select>
<div className="overSelect" onClick="showCheckboxes()"></div>
</div>
<div id="checkboxes">
<label htmlFor="one">
<input type="checkbox" id="one" />
First checkbox
</label>
<label htmlFor="two">
<input type="checkbox" id="two" />
Second checkbox
</label>
<label htmlFor="three">
<input type="checkbox" id="three" />
Third checkbox
</label>
</div>
</div>
</Fragment>
);
}
}
export default Home;