freeCodeCamp/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md

id, title, challengeType, isHidden, isRequired, forumTopicId

id	title	challengeType	isHidden	isRequired	forumTopicId
5a24c314108439a4d4036188	Render Conditionally from Props	6	false	false	301405

Description

So far, you've seen how to use if/else, &&, null and the ternary operator (condition ? expressionIfTrue : expressionIfFalse) to make conditional decisions about what to render and when. However, there's one important topic left to discuss that lets you combine any or all of these concepts with another powerful React feature: props. Using props to conditionally render code is very common with React developers — that is, they use the value of a given prop to automatically make decisions about what to render. In this challenge, you'll set up a child component to make rendering decisions based on props. You'll also use the ternary operator, but you can see how several of the other concepts that were covered in the last few challenges might be just as useful in this context.

Instructions

The code editor has two components that are partially defined for you: a parent called GameOfChance, and a child called Results. They are used to create a simple game where the user presses a button to see if they win or lose. First, you'll need a simple expression that randomly returns a different value every time it is run. You can use Math.random(). This method returns a value between 0 (inclusive) and 1 (exclusive) each time it is called. So for 50/50 odds, use Math.random() >= .5 in your expression. Statistically speaking, this expression will return true 50% of the time, and false the other 50%. On line 30, replace the comment with this expression to complete the variable declaration. Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the Results component as a child of GameOfChance, and pass in expression as a prop called fiftyFifty. In the Results component, write a ternary expression to render the text "You Win!" or "You Lose!" based on the fiftyFifty prop that's being passed in from GameOfChance. Finally, make sure the handleClick() method is correctly counting each turn so the user knows how many times they've played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row.

Tests

tests:
  - text: The <code>GameOfChance</code> component should exist and render to the page.
    testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('GameOfChance').length, 1);
  - text: <code>GameOfChance</code> should return a single <code>button</code> element.
    testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('button').length, 1);
  - text: <code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.
    testString: assert(Enzyme.mount(React.createElement(GameOfChance)).find('Results').length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find('Results').props().hasOwnProperty('fiftyFifty') === true);
  - text: <code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.
    testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1);
  - text: 'When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.'
    testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find(''p'').text(), ''Turn: 1'');'
  - text: 'Each time the button is clicked, the counter state should be incremented by a value of 1, and a single <code>p</code> element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state.'
    testString: "(() => {
      const comp = Enzyme.mount(React.createElement(GameOfChance));
      const simulate = () => {
        comp.find('button').simulate('click');
      };
      const result = () => ({
        count: comp.state('counter'),
        text: comp.find('p').text(),
      });
      const _1 = () => {
        simulate();
        return result();
      };
      const _2 = () => {
        simulate();
        return result();
      };
      const _3 = () => {
        simulate();
        return result();
      };
      const _4 = () => {
        simulate();
        return result();
      };
      const _5 = () => {
        simulate();
        return result();
      };
      const _1_val = _1();
      const _2_val = _2();
      const _3_val = _3();
      const _4_val = _4();
      const _5_val = _5();
      assert(
        _1_val.count === 2 &&
          _1_val.text === 'Turn: 2' &&
          _2_val.count === 3 &&
          _2_val.text === 'Turn: 3' &&
          _3_val.count === 4 &&
          _3_val.text === 'Turn: 4' &&
          _4_val.count === 5 &&
          _4_val.text === 'Turn: 5' &&
          _5_val.count === 6 &&
          _5_val.text === 'Turn: 6'
      );
    })();
    "
  - text: When the <code>GameOfChance</code> component is first mounted to the DOM and each time the button is clicked thereafter, a single <code>h1</code> element should be returned that randomly renders either <code>You Win!</code> or <code>You Lose!</code>.
    testString: "(() => {
      const comp = Enzyme.mount(React.createElement(GameOfChance));
      const simulate = () => {
        comp.find('button').simulate('click');
      };
      const result = () => ({
        h1: comp.find('h1').length,
        text: comp.find('h1').text(),
      });
      const _1 = result();
      const _2 = () => {
        simulate();
        return result();
      };
      const _3 = () => {
        simulate();
        return result();
      };
      const _4 = () => {
        simulate();
        return result();
      };
      const _5 = () => {
        simulate();
        return result();
      };
      const _6 = () => {
        simulate();
        return result();
      };
      const _7 = () => {
        simulate();
        return result();
      };
      const _8 = () => {
        simulate();
        return result();
      };
      const _9 = () => {
        simulate();
        return result();
      };
      const _10 = () => {
        simulate();
        return result();
      };
      const _2_val = _2();
      const _3_val = _3();
      const _4_val = _4();
      const _5_val = _5();
      const _6_val = _6();
      const _7_val = _7();
      const _8_val = _8();
      const _9_val = _9();
      const _10_val = _10();
      const __text = new Set([
        _1.text,
        _2_val.text,
        _3_val.text,
        _4_val.text,
        _5_val.text,
        _6_val.text,
        _7_val.text,
        _8_val.text,
        _9_val.text,
        _10_val.text,
      ]);
      const __h1 = new Set([
        _1.h1,
        _2_val.h1,
        _3_val.h1,
        _4_val.h1,
        _5_val.h1,
        _6_val.h1,
        _7_val.h1,
        _8_val.h1,
        _9_val.h1,
        _10_val.h1,
      ]);
      assert(__text.size === 2 && __h1.size === 1);
    })();
    "

Challenge Seed

class Results extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1>{/* change code here */}</h1>;
  }
}

class GameOfChance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 1
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      counter: 0 // change code here
    });
  }
  render() {
    const expression = null; // change code here
    return (
      <div>
        <button onClick={this.handleClick}>Play Again</button>
        {/* change code below this line */}

        {/* change code above this line */}
        <p>{'Turn: ' + this.state.counter}</p>
      </div>
    );
  }
}

After Test

ReactDOM.render(<GameOfChance />, document.getElementById('root'));

Solution

class Results extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1>{this.props.fiftyFifty ? 'You Win!' : 'You Lose!'}</h1>;
  }
}

class GameOfChance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 1
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      counter: this.state.counter + 1
    });
  }
  render() {
    const expression = Math.random() >= 0.5;
    return (
      <div>
        <button onClick={this.handleClick}>Play Again</button>
        <Results fiftyFifty={expression} />
        <p>{'Turn: ' + this.state.counter}</p>
      </div>
    );
  }
}