Issues populating dynamic dropdown with React Hooks

Question

I've never had any issue with this before but I've been struggling to get this to work so I'm hoping someone can notice something that I'm just missing. I'm pulling data from an API to populate a dropdown in my form. The data gets returned just fine and I assign in to my state using useState with no issues. However, when I try to map my results to options for my dropdown it never populates.

Here is my state and my useEffect function that I'm calling once when the page loads.

const [users, setUsers] = useState([]);

useEffect(() => {
    axios.get("/api/v1/users/find").then(res => {
        setUsers(res.data)
    })
}, [])

Like I said this all works with no issues. However this is where the issue is, my form:

<div className="relative">
    <h3 className="text-2xl text-center font-bold mb-6">Create Item</h3>

    <select className="h-full w-full border-gray-300 px-2 transition-all border-blue rounded-sm" name="owner" onChange={(e) => props.handleChange(e, 'owner')}>
        <option selected value=''>Owner</option>
        {users.map((i) => {
            <option value={i.name}>{i.name}</option>
        })}
    </select>
</div>

Once again I've never had any issues with this so I'm not sure why it doesn't seem to be populating. Appreciate the help in advance!

David · Accepted Answer · 2021-08-12 17:41:33Z

1

Currently the function passed to .map() doesn't return anything. You can fix this by replacing the curly braces with parentheses:

{users.map((i) => (
    <option value={i.name}>{i.name}</option>
))}

When curly braces are used in an arrow function you need an explicit return statement to return a value. Without curly braces there is an implicit return on the one line of the function body. (In this case parentheses just help define that one line since it includes carriage returns.)

answered Aug 12, 2021 at 17:41

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wolfy Over a year ago

It's so weird that I've never had a problem before and I've never even known this. Thank you so much this worked perfectly!

Collectives™ on Stack Overflow

Issues populating dynamic dropdown with React Hooks

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related