CODEWITHSUNDEEP
javascriptcssreactjs
Noa
Noa

Reputation: 434

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

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

Upvotes: 0

Views: 1130

Answers (2)

doronn
doronn

Reputation: 46

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

Upvotes: 0

chuve
chuve

Reputation: 728

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

Upvotes: 1

Related Questions