React - Use Advanced JavaScript in React Render Method

[mahassan]

Tell us what’s happening:
I couldn’t pass the following test

When MagicEightBall is first mounted to the DOM, it should return an empty p element
When I checked hint, it has the following

const answer = possibleAnswers[this.state.randomIndex];
<p>
  {answer}          
</p>

following is my code, so why is the answer in hint possibleAnswers[this.state.randomIndex];

Your code so far

const inputStyle = {
  width: 235,
  margin: 5
};

class MagicEightBall extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: '',
      randomIndex: ''
    };
    this.ask = this.ask.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  ask() {
    if (this.state.userInput) {
      this.setState({
        randomIndex: Math.floor(Math.random() * 20),
        userInput: ''
      });
    }
  }
  handleChange(event) {
    this.setState({
      userInput: event.target.value
    });
  }
  render() {
    const possibleAnswers = [
      'It is certain',
      'It is decidedly so',
      'Without a doubt',
      'Yes, definitely',
      'You may rely on it',
      'As I see it, yes',
      'Outlook good',
      'Yes',
      'Signs point to yes',
      'Reply hazy try again',
      'Ask again later',
      'Better not tell you now',
      'Cannot predict now',
      'Concentrate and ask again',
      "Don't count on it",
      'My reply is no',
      'My sources say no',
      'Most likely',
      'Outlook not so good',
      'Very doubtful'
    ];
    const answer = Math.floor(Math.random() * possibleAnswers.length) // Change this line
    return (
      <div>
        <input
          type='text'
          value={this.state.userInput}
          onChange={this.handleChange}
          style={inputStyle}
        />
        <br />
        <button onClick={this.ask}>Ask the Magic Eight Ball!</button>
        <br />
        <h3>Answer:</h3>
        <p>
          {/* Change code below this line */}
        {possibleAnswers[answer]}
          {/* Change code above this line */}
        </p>
      </div>
    );
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: React - Use Advanced JavaScript in React Render Method

Link to the challenge:

freeCodeCamp.org

[DanCouper]

In the render function you are:

1. declaring a variable containing all the possible answers.
2. declaring a variable that picks a random one of those.
3. returning JSX like:

   <p>
     {possibleAnswers[answer]}
   </p>
   

The challenge is asking you to fill in a random answer on a click of the button (then a new one on every clock), not just render one random answer straightaway.

You aren’t making any use of the state, you’re just rendering static variables.