populate select element from state in react

Question

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>

at the moment when i click select element i am getting nothing... — walee, Jan 22 '22 at 11:50

score 1 · Answer 1 · answered Jan 22 '22 at 11:50

1

With a map function, it should return something. In your map function it doesn't return anything.

Modified code

{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.

answered Jan 22 '22 at 11:50

Arjis Chakraborty

536
2
10

oh that was simple mistake, now its working – walee Jan 22 '22 at 11:53
Glad to know it started working. Could you please accept this answer so that others might also benefit from it? – Arjis Chakraborty Jan 22 '22 at 11:54

score 0 · Answer 2 · edited Jan 23 '22 at 21:15

0

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>

edited Jan 23 '22 at 21:15

Avishka Dambawinna

1,180
1
13
29

answered Jan 22 '22 at 11:51

Muhammad Yasir Abbas

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 22 '22 at 12:54

score 0 · Answer 3 · answered Jan 22 '22 at 12:01

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;

populate select element from state in react

3 Answers3

Modified code