CODEWITHSUNDEEP
javascriptreactjsjsx
brooksrelyt
brooksrelyt

Reputation: 4025

How can React add and remove work together?

I am new to react and am trying to toggle a body class using two different buttons. One is supposed to add a class using an onClick event and the other is supposed to remove the class. Below is an example of my code.

Right now in the console I can see the event fire twice but the class remains. As I stated I am new to React so I know I may be doing this incorrectly.

bodyFixed() {
    document.body.classList.add('body-fixed');
}

bodyRelative() {
   document.body.classList.remove('body-fixed');
}

Upvotes: 0

Views: 163

Answers (3)

brooksrelyt
brooksrelyt

Reputation: 4025

I was able to use the code I listed earlier. I had my onClick events positioned incorrectly. Here is an example of the code I used:

bodyFixed() {
  document.body.classList.add('body-fixed');
}  

bodyRelative() {
  document.body.classList.remove('body-fixed');
}


<Toggle>
  {({on, getTogglerProps, setOn, setOff, toggle, showAlert}) =>
  <div>
    <button className="search-icon-top" {...getTogglerProps()}>{on ? <img className="times" onClick={this.bodyRelative} src={require('img/times.svg')} alt=" " /> : <i className="fa fa-search" onClick={this.bodyFixed}></i>}</button>
    <div>
      {on ? <TodaySearchBox /> : ''}
    </div>
  </div>}
</Toggle>

This is just a start for now. Thank you for the input.

EDIT: I am open to suggestions. Like I said I am new to React.

Upvotes: 0

Jordan Enev
Jordan Enev

Reputation: 18664

You want to toggle a className prop value in the React way.

The React way is having a state prop and having a handler function that will toggle the state value, rather than manipulating the DOM node directly (the way you're doing it).

I would suggest you to take a look at React Main Concepts: Handling events and later once you feel a little bit more comfortable to read about Virtual DOM and Reconciliation in React.

Here's how can you do it:

const { classNames } = window

class App extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      isToggled: true
    }
    
    this.toggleClass = this.toggleClass.bind(this)
  }
  
  toggleClass() {
    const { isToggled } = this.state
    
    this.setState({
      isToggled: !isToggled
    })
  }
  
  render() {
    const { isToggled } = this.state
    
    const className = classNames({
      'body-fixed': isToggled
    })
  
    return <div className={className}>
      <div>Current `className`: <b>{ className }</b></div>
      <button onClick={this.toggleClass}>Toggle class</button>
    </div>
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

Upvotes: 1

SpeedOfRound
SpeedOfRound

Reputation: 1278

You are trying to modify the dom directly like you would with vanilla js or JQuery, but this is not how react is meant to be used. React creates a virtual dom that you create and manage, and then react handle changing the page for you.

I recommend following a guide like this one to learn basic setup and concepts (skip to the part where he uses JSX). I can further point you in the right direction if you show your whole component file.

Upvotes: 3

Related Questions