Dropdown from JSON response in React with hooks

Question

I want to make a dropdown from data I get from a REST API. Unfortunately, what I have already tried doesn't work, nothing is shown in the dropdown. See code for reference. It says '

×
TypeError: teams.current.map is not a function

'

My object looks like

[
    {
        "id": 5,
        "name": "hasda"
    },
    {
        "id": 6,
        "name": "asdasd"
    }
]

I took a look at that link, but it didn't help much. I hope you can help me

    import React, { useState, useEffect, useRef } from "react";
    import { useHistory } from "react-router-dom";
    import axios from 'axios'
    
    
    function Navbar() {
        const [team, setTeam] = useState([]);
    
    
        useEffect(() => {
            getTeams()
        }, []);
    
        const getTeams = () => {
            axios
                .get(`${process.env.REACT_APP_API_URL}/team/all`, {})
                .then((res) => {
                    console.log(res.data);
                    setTeam(res.data)
                })
                .catch((error) => {
                    console.log(error)
                })
        }
    
    
        return (
    
                 <p className="navbar-item">Mannschaften</p>
    
                 <div className="navbar-dropdown">
    
                 {/* {team.current.map((d, i) => (
    
                      <a className="navbar-item" href={i.mannschaftsname}>{i.mannschaftsname}</a>
    
                  ))}  */}



                 {/* {
                   this.state.team.map((obj) => {
                   return <option team={obj.id}>{obj.name}</option>
                    })
                 } */}

                   <a className="navbar-item" href="/login">Test</a>
                   </div>
            </div>

    );
}

export default Navbar;

@Danial looks like this [ { "id": 5, "name": "hasda" }, { "id": 6, "name": "asdasd" } ] — Mr. Hankey
– Mr. Hankey, Commented Aug 29, 2021 at 13:55

Mohit kumar · Accepted Answer · 2021-08-29 13:55:41Z

1

Your state name is team and not teams. So, you can try something like:

<select>
{

     team?.map((obj) => {
          return <option team={obj.id}>{obj.name}</option>
     })  
}
</select>

answered Aug 29, 2021 at 13:55

Mohit kumar

4872 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Dropdown from JSON response in React with hooks

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related