CODEWITHSUNDEEP
javascriptreactjs
user3194649
user3194649

Reputation: 11

React not updating style

I'm trying to change style when a button is clicked using React. I can see value is changing when button is clicked, but style is not changing. I've been writing in many ways with no luck.

export const Paragraph = () => {
    var state = 'none'
    const changeState = () => {
        state = state == 'none' ? 'inline-block' : 'none'
    }

    return (
        <div>
            <p style={{display: state}}</p>
        </div>
    )
}

Upvotes: 1

Views: 1719

Answers (1)

Andrii Starusiev
Andrii Starusiev

Reputation: 7774

Better way to set a class instead inline styles.

 class Paragraph extends React.Component{
    constructor(){
        super();
        this.state = {
            isClicked: false
        };
    }
    onClick(){
        let condition = this.state.isClicked;
        this.setState({isClicked: !condition})
    }
    render(){
        return (
            <div onClick={this.onClick.bind(this)}>
                <p className={this.state.isClicked? "class_1" : "class_2"}></p>
            </div>
        );
    }
}

Upvotes: 1

Related Questions