I'm trying to hide / show a ponent while checking a state value :

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = true;
    }

    render() {    
        return (
          <div className="App">
            {this.state && <Button variant="raised" onClick={this.state=false}>Button</Button>}

          </div>
        );
    }
}

export default App;

I don't know where's the bug / wrong code, but the render doesn't seems to refresh.

I'm trying to hide / show a ponent while checking a state value :

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = true;
    }

    render() {    
        return (
          <div className="App">
            {this.state && <Button variant="raised" onClick={this.state=false}>Button</Button>}

          </div>
        );
    }
}

export default App;

I don't know where's the bug / wrong code, but the render doesn't seems to refresh.

• javascript
• reactjs

• 1 You need to supply a function to the onClick property. this.state=false is clearly not one. You also need to use setState method rather than setting directly. And if you're there, make your state an object for the better. – gorhawk Commented Oct 2, 2018 at 9:12

3 Answers 3

You are using it incorrectly. You have to init the state like this

constructor(props) {
  super(props);
  this.state = {show: true}
}

and render it like this

return (
    <div className="App">
        {this.state.show && <Button variant="raised" onClick={() => this.setState({show:false})}>Button</Button>}

      </div>
);

You can't declare this.state as a variable, that should return an error on pile. As Murat said.

State in react is a JS object and is declared as such:

this.state = { ... }

In order to mutate (change) the state, you can't do it directly in react or else react will not know it has changed. If you were to say declare your state as:

this.state = {show: true}

and then wanted to change the boolean to false, you couldn't do it by simply doing this.state.show = false. React wouldn't know that the change had happened, that is why you need to use a react method called setState(). As Murat said you will change the state by using the following onClick metod: onClick={() => this.setState({show:false})}.

You should check this documentation page about react state for more on it, it is an important part of working with React.JS.

https://reactjs/docs/state-and-lifecycle.html

There's a section on the article titled "Using state correctly" have a look at that. :)

In a a React ponent, this.state is expected to be an object representing the state of your ponent.

1) this.state must be initialized (either in the constructor or in the class body)

example in the constructor:

constructor(props) {
    super(props);
    this.state = {
        showButton: true
    };
}

2) The event handler must be a reference to a method (this.handleButtonClick) of your ponent and this method must be bound to the ponent instance:

constructor(props) {
    super(props);
    this.state = {
        showButton: true
    };
    this.handleButtonClick = this.handleButtonClick.bind(this);
}
handleButtonClick(event) {
    this.setState(() => ({ showButton: false }));
}
render() {

    return (
        <div className="App">
            {this.state.showButton && <Button variant="raised" onClick={this.handleButtonClick}>Button</Button>}

        </div>
    );
}

Note that you musn't set state directly but rather use the setState method, the signature of setState that I used is the updater form, look into react documentation for explaination on this.