React + MaterializeCSS Navbar Problems


#1

Hey ladies and gents.

I’m working on a React app in Meteor and I’m hoping to use Materialize CSS for my UI stuff.

I installed the Materialize meteor package (had problems with dependencies withthe NPM version),
I can style everything using Materialize’s css style, everything works perfect – except the navbar.

The navbar (you can see the picture below) UL + LI elements display on a row below the actual navbar - No clue why this is happening, whether its a CSS problem, or the way my React component is set up.

My MainLayout code looks like this -

import React from 'react';
import AccountsUI from '../AccountsUI.jsx';

export const MainLayout = ({content}) => (
  <div className="main-layout">
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">Logo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="sass.html">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
          <li><a href="collapsible.html">JavaScript</a></li>
        </ul>
      </div>
    </nav>
      {content}
  </div>
)

Any ideas?
Thanks!


#2

Change your class to className. That should fix it.


#3

You rock! Cheers. DIdn’t even think of that.


#4

No problem at all. Glad you got it working.


#5

Hey, one more thing if you are familiar with Materialize + React integration.

I’m following a todo list tutorial, trying to get the Materialize checkboxes working with the checked + onClick functions I have currently.

This is what I’ve got (before introducing Materialize this worked) :

  <input type="checkbox"
    className="filled-in"
    id="filled-in-box"
    readOnly={true}
    checked={this.props.task.complete}
    onClick={this.toggleChecked.bind(this)}
  />

Now my checkbox doesn’t register an onClick or my checked prop either.


#6

Do you have errors in the browser console? What do you mean not registering?


#7

No errors in console.
As in, when I click the checkbox, it doesn’t check.

It should be “checked” if that task’s “complete” boolean is true, but that no longer works either.

I’ll explore it a bit more, it seems that when I inspect element in Chrome dev tools, the checkbox doesn’t get highlighted, but the label :

      <input type="checkbox"
        className="filled-in"
        id="filled-in-box"
        readOnly={true}
        checked={this.props.task.complete}
        onClick={this.toggleChecked.bind(this)}
      />
      <label for="filled-in-box">&nbsp;</label> 

Is the one that I can click on with dev tools.
This is confusing me alot hahaha

Thanks so much by the way


#8

When clicked does the checked value go from true to false if you console log it? If you could share a bit more code for the container and the rest of that component or if it’s on GitHub I can check it out.


#9

Actually figured it out.
Seems like it’s a problem with the Label covering the Checkbox,
So what I did was :

      <input type="checkbox"
        className="filled-in"
        id="filled-in-box"
        readOnly={true}
        checked={this.props.task.complete}
      />
      <label for="filled-in-box" onClick={this.toggleChecked.bind(this)}>&nbsp;</label> 

Added the onClick from the checkbox to the label instead.
Wish the label wasn’t necessary but oh well.

Thanks again, you’ve helped so much.


#10

Haha well that’s strange. Not a problem. Glad I could help.


#11

Hi,

I am using the navbar . Do you know how to initialize $(".button-collapse").sideNav(); ?Which part I should place it in React .


#12

Put the componentDidMount() function at the top of your component then put that sidenav jQuery inside it and it will work.


#13

Ya I did that, but I got this error

layout.main.jsx?e49f:17Uncaught TypeError: $(…).sideNav is not a function


#14

Have you added the materialize package?


#15

yes, I installed via npm.


#16

How are you importing it? I tried the NPM one with no luck so I installed the atmosphere package and it all works.


#17

sorry, I though I was make a mistake. I also got a problem when using npm one.

I just installed the package using the meteor poetic:materialize-scss one . Now works fine.

Thanks very much.


#18

No problem. Glad you got it working.