Menu
I am a noobie at React and I am trying to make a Bootstrap dropdown. The html that I am attaching to is here:
<ul class="dropdown-menu" id="dropdown"> </ul> And here is what I want to put in my render method to insert inside of my html:
render: function() { return ( <li><a href="#books">Books</a></li> <li><a href="#podcasts">Podcasts</a></li> <li><a href="#">Tech I Like</a></li> <li><a href="#">About me</a></li> <li><a href="#addBlog">Add a Blog</a></li> ); } But of course I can only return one element. What is the right way of doing this in React? How could I add multiple <li>'s into a dropdown like this? I tried wrapping the whole thing in a <div>, but that messes up my css.
269
To create a dropdown menu using React Booitstrap define the dropdown navigation button or item within the <Dropdown> and <Dropdown. toggle> component, and dropdown menu items within the <Dropdown. Item> component.
To create a dynamic drop down list with React Bootstrap, we can call the option array's map method to return the option element for each option in the array. We call options. map with a callback that returns the option element by setting the value prop to id and the text content to name .
Populating the Dropdown Now that we have the basic layout of our app and the very beginning of our dropdown — we'll need to go through each object in the fruits array and create an option element for it, with the corresponding value / label. import React, {useState} from 'react'; import './App.
react bootstrap makes working with react & bootstrap a bit easier:
render: function(){ return ( <DropdownButton title="Dropdown"> <MenuItem href="#books">Books</MenuItem> <MenuItem href="#podcasts">Podcasts</MenuItem> <MenuItem href="#">Tech I Like</MenuItem> <MenuItem href="#">About me</MenuItem> <MenuItem href="#addBlog">Add a Blog</MenuItem> </DropdownButton> ); } This looks about the same, but has event-handlers & adds all the right classes. As @sophie-alpert said, though, render must return a single DOM parent element.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
