I am trying to get a model based on the Brand. But getting the error when selection the next option
Error says bikeBrand is not a Function
Below is the Json data getting from backend
response from backend { BMW:["F900R", "F900XR"], KTM:["125 Duke", "250 Duke"]}
Then storing on the state using useState hook in React
const [bikeBrands, setBikeBrands] = useState("")
First option value is storing in below hook too
const [selectedBrand, setSelectedBrand] = useState("")
Problem is in the second selection option.
<select onChange={(e) => setSelectedBrand(e.target.value)}>
<option>Choose brand</option>
{Object.keys(bikeBrands).map((bikeBrand, index) => {
return <option>{bikeBrand}</option>
})}
</select>
<select onChange={(e) => setModel(e.target.value)}>
<option>Choose Model</option>
{Object.keys(bikeBrands).map((bikeBrand, index) => {
bikeBrand.map((brandModels, index) => {
return <option>{brandModels}</option>
})
})}
</select>
As you are doing
{Object.keys(bikeBrands).map((bikeBrand, index) => {
bikeBrand.map((brandModels, index) => {
return <option>{brandModels}</option>
})
})}
note that Object.keys(bikeBrands) gives you array of keys, and these individual keys (one at a time) are stored in bikeBrand.
This bikeBrand is a variable which holds string BMW or KTM not the value.
So instead of writing bikeBrand.map
Use bikeBrands[bikeBrand].map to access Array values.