Drop down menu in react js and bootstrap

1

Hey i referred official bootstrap documentation for bootstrap and copied the code for NavBar drop down menu

Onclick theme dropdown i can’t see any drop down

Strangely it does not work. Why ??? What is the mistake I am making ?

Here is my code

Thanks

2

Hello! Taking a look to the console report in your project:

Warning: Invalid DOM property `class`. Did you mean `className`?
    in ul (at NavBar.jsx:12)
    in nav (at NavBar.jsx:8)
    in NavBar (at src/index.js:8)
    in StrictMode (at src/index.js:7)

At line 12, you can spot where that property is being used:

<ul class="navbar-nav">

If you copy the entire code from Bootstrap documentation, it will use standard HTML properties, while in JSX, as it is closer to JavaScript than to HTML, adopts camelCase for variables naming. So class becomes className.

3

I did that but still on click i can’t see dropdown

4

Now look at the Problems tab. It says (for each a element):

The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md (jsx-a11y/anchor-is-valid)

I’ve researched a little (googled eslint href anchor error), and i arrived to these posts:


Hope they help.

5

Well i don’t understand, how it may help. i am an absolute begineer. Can you help me out with this ?

6

You have react-bootstrap as a dependency but you are not using it. Use the navbar component.

7

Hey thanks for reverting back.
Is it not possible to do the same with plain bootstrap and JSX?

If not what is the reason ??

I will use navbar from react-bootstrap but pls clear my doubt

Thanks

8

Well, first off all you would need to actually include the jQuery and Bootstrap JS files which give the toggle functionality. Then you would need to deal with the lint warnings coming from eslint-plugin-jsx-a11y.

I’d suggest you use a component library if you want to use Bootstrap with React.

9

Thank you so much for the answer