We have answer of your question!

100% solved queries, no empty question

Question: React set active class based on parent state value


0

I have the following:

class Link extends React.Component {
    render () {
        return (
            <li data-id={this.props.el}>{this.props.el}</li>
        );
    }
}

class Nav extends React.Component {
    render () {
        var links = ['name', 'color', 'design', 'share'],
            newLinks = [],
            that = this;
        links.forEach(function(el){
            newLinks.push(<Link activeClass={that.props.active} key={el} el={el} />);
        });
        return (
            <ul>
                {newLinks}
            </ul>
        );
    }
}

the value of this.props.active could be " 'name', 'color', 'design', 'share' " same as the array.

Based on that value I would like to assign an active class to the matching li with same data-id={this.props.el} value..

Question author Alex | Source

Answer


1


class Link extends React.Component {
    render () {
       var liClass = this.props.isActive ? 'active' : '';
        return (
            <li className={liClass} data-id={this.props.el}>{this.props.el}</li>
        );
    }
}

class Nav extends React.Component {
    render () {
        var links = ['name', 'color', 'design', 'share'],
            newLinks = [],
            that = this;
        links.forEach(function(el){
            newLinks.push(<Link isActive={el === that.props.active} key={el} el={el} />);
        });
        return (
            <ul>
                {newLinks}
            </ul>
        );
    }
}
Answer author Darokan

Tickanswer.com is providing the only single recommended solution of the question React set active class based on parent state value under the categories i.e javascript , reactjs , . Our team of experts filter the best solution for you.

Related Search Queries:


You may also add your answer

Thanks for contributing an answer to Tick Answer!