CODEWITHSUNDEEP
reactjs
AminMG
AminMG

Reputation: 3

ReactJS: can not change style with changing state

I'm new in ReactJS(in fact I'm learning), I've written a simple code to check the style changing but as my best knowledge when the state change in react it will reRender the component but when I did this it does not happen, so I tried forceUpdate() and this work but the style does not change again, I've tried this before with a simple state and it worked but when I set my style in an object everything got screwed up, thanks for any help 

class Check extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sty: {
                width: 200 + 'px',
                backgroundColor: 'blue',
                height: 200 + 'px', marginBottom: 20 + 'px'
            }
        }
        this.update = this.update.bind(this);
    }

    update() {
        let sty = this.state.sty;
        sty.backgroundColor = 'red';

        this.setState = ({ 
            sty 
        })
        this.forceUpdate();
    }

    render() {
        console.error(this.state.sty['backgroundColor']);
        return (
            <div style={this.state.sty} onClick={this.update} id="checkBox" className="First">
                <span>{this.props.children}</span>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <Check key={1}>1</Check>
        <Check key={2}>2</Check>
        <Check key={3}>3</Check>
        <Check key={4}>4</Check>
    </div>, 
document.getElementById('container'))

Upvotes: 0

Views: 1753

Answers (2)

Treycos
Treycos

Reputation: 7492

In a React component, setState is a function, you have to call it to use it.

Here is a working example of your code :

class Check extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sty: {
                width: 200 + 'px',
                backgroundColor: 'blue',
                height: 200 + 'px', marginBottom: 20 + 'px'
            }
        }
    }

    update = () => {
        this.setState({ sty: {
                width: 200 + 'px',
                backgroundColor: 'red',
                height: 200 + 'px', marginBottom: 20 + 'px'
            }
        });
    }

    render() {
        return (
            <div style={this.state.sty} onClick={this.update} id="checkBox" className="First">
                <span>{this.props.children}</span>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <Check key={1}>1</Check>
        <Check key={2}>2</Check>
        <Check key={3}>3</Check>
        <Check key={4}>4</Check>
    </div>, 
document.getElementById('container'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.0/umd/react-dom.production.min.js"></script>
<div id='container'/>

A good practice would rather be to use CSS styling and make your components className vary based on his state

Upvotes: 0

Yasin Tazeoglu
Yasin Tazeoglu

Reputation: 1004

not use =.Use this.setState({...})

https://reactjs.org/docs/react-component.html#setstate

class Check extends React.Component{ 
  constructor(props) {   
    super(props);
     this.state = { 
        sty : { width : 200 +'px', 
                backgroundColor : 'blue', 
                height: 200 + 'px', marginBottom : 20+'px' }
         }
     this.update = this.update.bind(this);
 }
 update(){
   this.setState(prevState=>({sty:{...prevState.sty,backgroundColor:'red'}}))
 } 

render() { 
    console.error(this.state.sty['backgroundColor']);
    return (
<div style={this.state.sty} onClick={this.update} id="checkBox" className="First">
    <span>{this.props.children}</span>

</div> ) 
        } 
}

 ReactDOM.render(

<div>
    <Check key={1}>1</Check>
    <Check key={2}>2</Check>
    <Check key={3}>3</Check>
    <Check key={4}>4</Check>
</div>, document.getElementById('container'))

Upvotes: 1

Related Questions