Question

60

How to toggle class in the nested component in ReactJS

rated 0 times [ 62] [ 2] / answers: 1 / hits: 23920 / 10 Years ago, sat, april 12, 2014, 12:00:00

I have such render() method in my root component:

render: function() {

    return (

        <div className=question>

            <QuestionA question={this.props.question} author={this.props.author}/>

            <QuestionB yes={this.state.yes} no={this.state.no} />

            <div className=question-side-switcher onClick={this.handleSideChanging}></div>

        </div>

    );

}

Where I want to toggle the 'active' class between QuestionA and QuestionB components when user clicked the button. How can I do this? Keep in mind, that QuestionA and QuestionB are set their own classNames in their render() methods. For example QuestionB's render():

render: function() {

    return (

        <section className=question-b-container>

            ...

        </section>

    );

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

victorr

Add To Favorites

Follow

Total Points: 193

Total Questions: 86

Total Answers: 105

Location: Pitcairn Islands

Member since Thu, Jun 24, 2021

3 Years ago

victorr questions

1 Dot product of two arrays in Javascript

Fri, Nov 13, 20, 00:00, 4 Years ago

1 Rendering a component only after API request is finished React hooks

Thu, Oct 15, 20, 00:00, 4 Years ago

1 Thousand separator input with React Hooks

Sat, Jul 25, 20, 00:00, 4 Years ago

1 Typescript object destructuring is caught by ESLint no-unused-vars rule

Fri, Jul 10, 20, 00:00, 4 Years ago

1 How to pass data to {props.children}

Thu, Jun 11, 20, 00:00, 4 Years ago

View All

answered 10 Years ago tyriquehenryq · Accepted Answer

There are a couple ways you could handle this.

If you want the parent to control the additional class, you can simply pass it in to the child components and have them add it to their existing class name (JSFiddle demo):

var QuestionA = React.createClass({

  render: function() {

    return <section className={this.props.className +  question-a-container}>Section A</section>;

  }

});



var QuestionB = React.createClass({

  render: function() {

    return <section className={this.props.className +  question-b-container}>Section B</section>;

  }

});



var Root = React.createClass({

  getInitialState: function() {

    return { question: 'a' };

  },



  render: function() {

    var qAclassName = this.state.question === 'a' ? 'active' : '';

    var qBclassName = this.state.question === 'b' ? 'active' : '';

    return (

      <div className=question>      

        <QuestionA className={qAclassName} />

        <QuestionB className={qBclassName} />

        <div className=question-side-switcher onClick={this.handleSideChanging}>Change</div>

      </div>

    );

  },



  handleSideChanging: function() {

    this.setState({question: this.state.question === 'a' ? 'b' : 'a' });

  }

});

However, it probably makes more sense to let the child manage the class name, and simply send some data along to indicate if it should set its active class (JSFiddle demo):

// Using classSet to more easily create conditional class names;

// see http://facebook.github.io/react/docs/class-name-manipulation.html

var cx = React.addons.classSet;



var QuestionA = React.createClass({

  render: function() {

    // always set question-a-container;

    // set active if we got a truthy prop named `active`

    var className = cx({

      question-a-container: true,

      active: this.props.active

    });

    return <section className={className}>Section A</section>;

  }

});



var QuestionB = React.createClass({

  render: function() {

    // always set question-b-container;

    // set active if we got a truthy prop named `active`

    var className = cx({

      question-b-container: true,

      active: this.props.active

    });

    return <section className={className}>Section B</section>;

  }

});



var Root = React.createClass({

  getInitialState: function() {

    return { question: 'a' };

  },



  render: function() {

    return (

      <div className=question>

        {/* For each question, compare to state to see if it's active. */}

        <QuestionA active={this.state.question === 'a'} />

        <QuestionB active={this.state.question === 'b'} />

        <div className=question-side-switcher onClick={this.handleSideChanging}>Change</div>

      </div>

    );

  },



  handleSideChanging: function() {

    this.setState({question: this.state.question === 'a' ? 'b' : 'a' });

  }

});