根据状态在React中渲染不同的子组件

Question

I'm making a short quiz in React, with each question as a different component. Each time a question is answered, I want to switch that component out for the next question component. Here's my root component as it is right now:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import PanelOne from './components/PanelOne';
import PanelTwo from './components/PanelTwo';
import PanelThree from './components/PanelThree';
import PanelFour from './components/PanelFour';
import Results from './components/Results';

class App extends Component {

  constructor (props) {
    super (props);
    this.state = {
      collaborator: 0,
      pilot: 0,
      producer: 0,
      harmonizer: 0,
      counter: 0
      answers: {
        answersOne: [
          {answer: 'Team building', archetype: 'collaborator'},
          {answer: 'Directing strategy', archetype: 'pilot'},
          {answer: 'Driving task completion', archetype: 'producer'},
          {answer: 'Keeping processes and relationships running smoothly', archetype: 'harmonizer'}
        ],

        answersTwo: [
          {answer: 'Setting a clear direction and creating a personal brand', archetype: 'collaborator'}
          {answer: 'Making space for others and planning for the longterm', archetype: 'pilot'}
          {answer: 'Connecting with team members and innovating', archetype: 'producer'}
          {answer: 'Accepting ambiguity and addressing conflict', archetype: 'harmonizer'}
        ],

        answersThree: [
          {answer: 'Settings where team members are seeking coaching and development', archetype: 'collaborator'}
          {answer: 'Ambiguous and high growth environments', archetype  'pilot'}
          {answer: 'Organizations with clear structures and processes', archetype: 'producer'}
          {answer: 'Volatile settings that need to be tamed'  archetype: 'harmonizer'}
        ],

        answersFour: [
          {answer: 'Settings where unilateral decision making is required', archetype: 'collaborator'}
          {answer: 'Conservative environments that discourage  innovation', archetype: 'pilot'}
          {answer: 'Teams where each member desires independence'  archetype: 'producer'}
          {answer: 'Anywhere tough feedback needs to be given'  archetype: 'harmonizer'}
        ]
      }
    }
    this.onSelect = this.onSelect.bind(this);
  }

  onSelect(value) {
    switch (value) {
      case 'collaborator':
        this.setState(prevState => {
          return {
            collaborator: prevState.collaborator + 1,
            counter: prevState.counter + 1
          }
        });
        break;
      case 'pilot':
        this.setState(prevState => {
          return {
            pilot: prevState.pilot + 1,
            counter: prevState.counter + 1
          }
        });
        break;
      case 'producer':
        this.setState(prevState => {
          return {
            producer: prevState.producer + 1,
            counter: prevState.counter + 1
          }
        });
        break;
      case 'harmonizer':
        this.setState(prevState => {
          return {
            harmonizer: prevState.harmonizer + 1,
            counter: prevState.counter + 1
          }
        });
        break;
    }
  }

  render() {
    switch (this.state.counter) {
      case 0:
        return (
          <div>
            <PanelOne answers={this.state.answers.answersOne} onSelect={this.onSelect}/>
          </div>
        );
        break;
      case 1:
        return (
          <div>
            <PanelTwo answers={this.state.answers.answersTwo} onSelect={this.onSelect}/>
          </div>
        );
        break;
      case 2:
        return (
          <div>
            <PanelThree answers={this.state.answers.answersThree}  onSelect={this.onSelect}/>
          </div>
        );
        break;
      case 3:
        return (
          <div>
            <PanelFour answers={this.state.answers.answersFour}  onSelect={this.onSelect}/>
          </div>
        );
        break;
      case 4:
        return (
          <div>
            <Results />
          </div>
        )
    }
  }
}

export default App;

My Form component looks like this:

import React from 'react';
import PropTypes from 'prop-types';
import { RadioGroup, RadioButton } from 'react-radio-buttons';

function Form (props) {
    return (
        <RadioGroup onChange={props.onSelect}>
            {
                props.answers.map(answer => 
                    <RadioButton key={answer.answer} value={answer.archetype}>
                        {answer.answer}
                    </RadioButton>
                )
            }
        </RadioGroup>
    )
}

Form.propTypes = {
  answers: PropTypes.array.isRequired,
  onSelect: PropTypes.func.isRequired
};

export default Form;

As of right now, each Panel component, as well as the Results component are all blank, with the Panel components only being containers for different versions of Form . The reason I have them as containers is purely so that I can style each panel differently (is this a good idea?).

The behavior I want, as I mentioned, is that when an answer is selected a new component is rendered, based on the change in state. I'm guessing that this isn't happening because setState() is asynchronous and changes relying on it won't happen immediately. My question is how do I achieve the behavior I want? Do I use lifecycle methods? I'm still somewhat fuzzy on how those work and how exactly I'd use them in this case. My secondary question (I am still looking for an answer to my first question regardless) is whether or not what I'm doing is good practice at all. If I rendered only different versions of Form with updated props, would I be able to style those differently from one another?

Answer 1

For anyone who comes across this: I made a really silly mistake and was missing some commas in my answers object, in my state. When I fixed this, everything ran correctly.

Answer 2

In your current question, things could be written differently, for example your onSelect method is now a huge switch statement, although your archetype and state properties seem to match, instead of this huge switch, you could change your statement to something like this:

onSelect(value) {
  this.setState(prevState => {
    return {
      [value]: prevState[value] + 1,
      counter: prevState.counter + 1
    }
  });
}

This would do the exact same thing, as archetype perfectly matches your properties, and the counter you increase anyhow in every step, no need to do things multiple times ;)

This even goes for your render method as well, no need for a huge switch, just make a dictionary matching state with your panel (in case you wish to do it like that), and you could do this

// provided you have a const on top, like
const questionsMap = { 0: 'One', 1: 'Two', 2: 'Three', 3: 'Four' };

render() {
  let { counter, answers } = this.state;
  if (!questionsMap[counter]) {
    // nothing matches, return the results panel
    return (<div>
        <Results />
      </div>);
  }
  let mappedValue = questionsMap['counter'];
  return React.createElement( 'Panel' + mappedValue , { answers: answers['answers' + mappedValue], onSelect: this.onSelect });
}

This really reduces a lot of code duplication, and will simplify your cause in the long run, however in the original part of my answer, I also like to give you a different way to structure everything ;)

I mainly want to offer you a different way of structuring your code. Sorry I had to recreate the RadioButton & RadioGroup new, but I didn't find the correct cdn at once (So ignore those implementations ;) )

Mainly, this application will also give you a small quiz, that can track the correct answers, and which answers were given (however, doesn't track what the correct should have been ;))

You can see that this code is a lot more compact than yours, and uses some es6 features, which really make full use of react & jsx as you can start by using destructuring of the props in the functional components (just a joy to work with) and the usage of let , const keywords.

I know it doesn't directly answer your question, but I just wanted to show you that you do not need this enormous code duplication, just past styles as props (or you will have 20+ components for 20+ questions in the future, which is code you never want to maintain)

Jsx & React set high on reusability, if you do think twice, think what you can do to unify your implementation

 const RadioGroup = ({ onChange, children = [] }) => { return <fieldset> { children.map( child => { return React.createElement( child.type, {...child.props, key: child.key, onChange } ); } ) } </fieldset>; }; const RadioButton = ({ onChange, children, value }) => { return <button onClick={(e) => onChange( value )}>{ children }</button>; }; const Results = ({ correctAnswers, givenAnswers, currentQuestion }) => { return <div> <div><b>Correct answsers:</b>{ correctAnswers }</div> <div><b>Answers given:</b>{ givenAnswers.join(', ') }</div> <div><b>False answers:</b>{currentQuestion - correctAnswers}</div> </div> }; const questions = [ { question: 'Are you on stack overflow?', answers: ['yes', 'no'], correct: 'yes' }, { question: 'Are you looking for help?', answers: ['yes', 'no'], correct: 'yes' }, { question: 'Did you find your answer?', answers: ['yes', 'no', 'maybe'], correct: 'maybe' } ]; const Question = ({ question, answers, correct, onSelected }) => { return (<div> <h2>{ question }</h2> <RadioGroup onChange={(e) => onSelected( correct === e, e, correct) }> { answers.map( answer => <RadioButton key={answer} value={answer}>{ answer }</RadioButton> ) } </RadioGroup> </div>); }; class App extends React.Component { constructor(...args) { super(...args); this.state = { currentQuestion: 0, correctAnswers: 0, givenAnswers: [] }; } onSelected( wasCorrect, answerGiven, correctAnswer ) { this.setState( prevState => ({ currentQuestion: prevState.currentQuestion + 1, correctAnswers: prevState.correctAnswers + (wasCorrect ? 1 : 0), givenAnswers: [...prevState.givenAnswers, answerGiven] })); } render() { let { currentQuestion } = this.state; let { questions } = this.props; if (currentQuestion < questions.length) { return <div><Question {...questions[currentQuestion]} onSelected={(...args) => this.onSelected(...args)} /></div>; } return <div><Results {...this.state} /></div> } } ReactDOM.render( <App questions={questions} />, document.querySelector('#container') ); 

 <script id="react" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script> <script id="react-dom" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script> <script id="prop-types" src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script> <script id="classnames" src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script> <div id="container"></div>