How to Target DOM Elements in ReactJS?

Question

Within my React app, I have a sidebar which needs to have a CSS class added to it when the sidebar close button is clicked. I'm using React.createRef() to create a reference to the element, however, I'm receiving the following error:

Here's my code:

import React from 'react';
import './css/Dashboard.css';

class Dashboard extends React.Component {

    constructor(props) {
        super(props);
        this.sidebar = React.createRef();
    }

    sidebarClose() {
        console.log('test');
        this.sidebar.className += "hidden";
    }

    render() {
        return (
            <div id="dashboard">
                <div ref={this.sidebar} id="sidebar">
                    <img width="191px" height="41px" src="logo.png"/>
                    <div onClick={this.sidebarClose} className="sidebar-close">X</div>
                </div>
            </div>
        );
    }
}

export default Dashboard;

The console.log('test') is just so that I can confirm the function is being executed (which it is).

Thank you.

You should be using state to control class names (and sidebar state anyways), not refs because the sidebar inherently has state — Andrew Li
– Andrew Li, Commented Aug 8, 2018 at 15:59
Yeah, check out the NPM classnames package. You should augment your classes in the component itself. But for refs, you would need to use this.sidebar.current to access it. But don't do that! :) — mccambridge
– mccambridge, Commented Aug 8, 2018 at 16:00

Tholle · Accepted Answer · 2018-08-08 16:01:17Z

5

Instead of manually trying to add a class to a DOM node, you can keep a variable in your state indicating if the sidebar is open and change the value of that when the button is clicked.

You can then use this state variable to decide if the sidebar should be given the hidden class or not.

Example

class Dashboard extends React.Component {
  state = { isSidebarOpen: true };

  sidebarClose = () => {
    this.setState({ isSidebarOpen: false });
  };

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

    return (
      <div id="dashboard">
        <div
          ref={this.sidebar}
          id="sidebar"
          className={isSidebarOpen ? "" : "hidden"}
        >
          <img
            width="191px"
            height="41px"
            src="logo.png"
            alt="craftingly-logo"
          />
          <div onClick={this.sidebarClose} className="sidebar-close">
            X
          </div>
        </div>
      </div>
    );
  }
}

answered Aug 8, 2018 at 16:01

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

1 Comment

Ankit Over a year ago

awesome.. didn't think of that.

Yurii Kramarenko · Accepted Answer · 2018-08-08 16:05:29Z

0

I think you forget to bind sidebarClose method to your class in constructor.

    constructor(props) {
        super(props);
        this.sidebar = React.createRef();
        this.sidebarClose = this.sidebarClose.bind(this); // here
    }

edited Aug 8, 2018 at 16:05

answered Aug 8, 2018 at 16:00

Yurii Kramarenko

1,0746 silver badges17 bronze badges

2 Comments

mccambridge Over a year ago

That's true. But this is still the wrong approach for manipulating classes in React.

Yurii Kramarenko Over a year ago

I know. But it answers current question and resolve problem with undefined

Collectives™ on Stack Overflow

How to Target DOM Elements in ReactJS?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related