New react developer here, trying to learn by coding, here I am stuck with simple select element, I have select element and inside it using map to populate options, i'm also consoling logging my data inside map and getting '50 getting data FUNDING_ACCOUNT'.
what I want to achieve is: a select element which user clicks and gets 'data.name' as dropdown, where is my mistake?
English is not my mother language so there could be mistakes.
i'm using fetch to populate 'setUpdateSelect'
My code:
const [updateSelect, setUpdateSelect] = useState([]);
<select>
{updateSelect.map((data) => {
console.log("getting data", data.name);
<option key={data.name} value={data.name}>
{data.name}
</option>;
})}
</select>With a map function, it should return something. In your map function it doesn't return anything.
{updateSelect.map((data) => {
console.log("getting data", data.name);
return (
<option key={data.name} value={data.name}>
{data.name}
</option>
);
})}
This should now work properly.
Thanks,
Arjis Chakraborty.
const [updateSelect, setUpdateSelect] = useState([]);
<select>
{updateSelect.map((data) => {
return( console.log("getting data", data.name);
<option key={data.name} value={data.name}>
{data.name}
</option>;)
})}
</select>
For rerendering, you can use like this;
const [updateSelect, setUpdateSelect] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
setUpdateSelect(yourdata);
setLoading(false);
},[yourdata])
return !loading ? (
<select>
updateSelect.map((data, index) => (
<option key={index} value={data.name}>
{data.name}
</option>
)
</select>
) : null;