How to change className to element after click on another element in React

Question

I have to change(add) className on the first div, after click on "icon-caret-down". My code doesn't work. Can you give me some tips?

export default class Nav extends React.Component {
    render() {
      
        var btnClass = classNames({
            'nav-conteiner': true,
            'nav-conteiner-mob': this.state.isPressed           
          });

            return (
           
            <div classNames={btnClass}>
                
                <span className='icon-soundcloud'></span>
                <h6 id="site-name">SoundCloud</h6>
                <span className="icon-caret-down" onClick={this.openSerch.bind(this)}></span>
                <ul>
                    <li><a href='#'>Explore</a></li>
                    <li><a href='#'>Playlist</a></li>
                </ul>
                <Search/>
                
            </div>

        );
    }
    openSerch(){
        console.log('hello');
        this.setState({isPressed:true});
    }
}

I suppose you are using the classnames package and hence you need var btnClass = classnames({ 'nav-conteiner': true, 'nav-conteiner-mob': this.state.isPressed }); with a lower case n in classnames and the correction that @JulienD suggested — Shubham Khatri
– Shubham Khatri, Commented Sep 28, 2017 at 8:38

chuve · Accepted Answer · 2017-09-28 09:23:51Z

1

I guess the main error that you didn't announce initial state.

The next thing, that you used wrong attribute "classNames" instead "className" to wrapper.

I corrected mistakes, check it out:

export default class Nav extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            isPressed: false
        }
    }

    render () {
        var btnClass = classNames({
            'nav-conteiner': true,
            'nav-conteiner-mob': this.state.isPressed
        });

        return (
            <div className={btnClass}>
                <span className='icon-soundcloud'></span>
                <h6 id="site-name">SoundCloud</h6>
                <span className="icon-caret-down" onClick={this.openSerch.bind(this)}></span>
                <ul>
                    <li><a href='#'>Explore</a></li>
                    <li><a href='#'>Playlist</a></li>
                </ul>
                <Search/>
            </div>
        );
    }

    openSerch () {
        this.setState({ isPressed: true });
    }
}

answered Sep 28, 2017 at 9:23

chuve

7387 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Noa Over a year ago

I tried it doesn't work. I started use constructor. thank you. It is empty screen now

chuve Over a year ago

Hmmm, what do you mean? Why screen is empty? Share error please. I have already tested my snippet of code, and i didn't get any trouble with rendering or anything else.

Noa Over a year ago

It is a problem. It didn't give any problem.

Noa Over a year ago

10% building modules 1/1 modules 0 active Project is running at localhost:8080 webpack output is served from / Content not from webpack is served from ./app 404s will fallback to /

Noa Over a year ago

I got this and empty screen(before I added State everything was good)

doronn · Accepted Answer · 2017-09-28 09:43:10Z

export default class Nav extends React.Component {
constructor (props) {
    super(props);
    this.state = {
        isPressed: false
    }
}
    render() {
      
        var btnClass = classNames({
            'nav-conteiner': true,
            'nav-conteiner-mob': this.state.isPressed           
          });

            return (
           
            <div classNames={this.state.isPressed ? btnActiveClass :btnClass }>
                
                <span className='icon-soundcloud'></span>
                <h6 id="site-name">SoundCloud</h6>
                <span className="icon-caret-down" onClick={this.openSerch.bind(this)}></span>
                <ul>
                    <li><a href='#'>Explore</a></li>
                    <li><a href='#'>Playlist</a></li>
                </ul>
                <Search/>
                
            </div>

        );
    }
    openSerch(){
        console.log('hello');
        this.setState({isPressed:true});
    }
}

Collectives™ on Stack Overflow

How to change className to element after click on another element in React

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related