reactjs - 想要在下拉列表中显示每个项目的数据作为选项

Question

class DropDown extends Component {
    constructor(){
        super()
        this.state = {
            item: [],
            isLoaded: true,
        }
    }
// here I have fetch the data from api
    componentDidMount() {
        fetch('link')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoaded: false,
                    item: responseJson.drawingInfo.renderer.uniqueValueInfos,

                })


            })

    }

    render() {
        const {item} = this.state;

// here I have map the array of data. And now wanna show it in a dropdown where every item is an option an we can select them


        const itemDropdown = item.map((division, index)=> (
            <div key={index}>

                    <option>{division.value}</option>

            </div>

        ))

        return (
{/*here I tried to show the data as dropdown option...but I got one option where all the data resides*/}
            <div>
                <ReactBootStrap.DropdownButton variant = 'transparent' id = "dropdown-button" title="Dropdown button" >
                    < ReactBootStrap.Dropdown.Item > {itemDropdown} </ReactBootStrap.Dropdown.Item> 

                </ReactBootStrap.DropdownButton>

            </div>
        );

    }
}

Answer 1

react bootstrap 下拉菜单使使用 react & bootstrap 更容易：

render (){
 const {item} = this.state;
  return (
    <DropdownButton title="Dropdown">
    { item.map((division, index)=> (
          <MenuItem>{division}</MenuItem>
    )
    </DropdownButton>
  );
}