Question

I'm trying to hide / show a component 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.

Answer 1

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>
);

Answer 2

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

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 component and this method must be bound to the component 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.

Answer 3

You can't declare this.state as a variable, that should return an error on compile. 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.org/docs/state-and-lifecycle.html

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

Show/Hide a component in React using state

3 个答案: