Use-advanced-javascript-in-react-render-method

JavaScript
1

Tell us what’s happening:

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 = possibleAnswers[this.state.randomIndex]// << change code here
    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 */ }
        {this.answer}
          { /* change code above this line */ }
        </p>
      </div>
    );
  }
};

Your browser information:

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

Link to the challenge:

1 Like
2

:roll_eyes::pray::kissing_closed_eyes::older_woman::ok_hand::dolphin::ocean::croissant::kiwi_fruit::pear::pretzel::pretzel::coconut:

2 Likes
3

Hi, The code should output the ‘possibleAnswers’ based on randomIndex.
You can see in the code, {this.state.randomIndex} will generate a random value and we need to pass it into the answer to generate a random text.

But here I’m getting an error.

Please check these lines…

const answer = possibleAnswers[this.state.randomIndex]// << change code here


{ /* change code below this line / }
{this.answer}
{ / change code above this line */ }

4

What’s the error ? and why do you need a this in front of the variable answer ?

5

Revisiting the previous lessons, Let’s see what I missed or forgot. I have completed the most of the challenges on my own and will try to solve this one too.

Anyways thank you all

1 Like
6

Finally solved the problem, here is the updated code.

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 = possibleAnswers[this.state.randomIndex];

    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 */ }
          {answer}
          { /* change code above this line */ }
        </p>
      </div>
    );
  }
};
3 Likes
7

Why I cannot pass the test? I wrote the same code as yours.

// running test
Timeout has occurred
// tests completed

What is wrong with it?
Thanks in advance!

8

Please share your code.

9

Thanks for your reply !

Here is a part of the code.

const answer = possibleAnswers[this.state.randomIndex] // << change code here
return (





Ask the Magic Eight Ball!


Answer:



{ /* change code below this line / }
{answer}
{ / change code above this line */ }



);
}
};

Thank you !

10

Hey, this is working fine, I just re-checked the challenge.

passed-test
passed-test2018×1110 376 KB

1 Like
11

You can also try destructing the state.

    const { randomIndex } = this.state;
    const answer = possibleAnswers[randomIndex]
2 Likes
12

Thanks for your reply!

I tried. but still cannot pass.

The result shows “Timeout has occurred!”

I do not know why.

13

I got the same error and I think there is a bug for this challenge.

14

Had the timeout error in Safari. I then switched to Chrome and I could pass the test with the same code (it did take a little while). Seems like a browser related bug.

5 Likes
15

Try delete comments around {answer} looks like this -> p tag{answer}close p tag ’ it’s works on me :sweat_smile:

1 Like
16

Thanks for that, Skeet. I had the same problem. Wish I had come to the forum earlier as it was just a browser issue Safari; switched to Firefox, test ran fine.

2 Likes
18

Had the same problem… Safari was the culprit!! darn, lost an hour! Continuing with Firefox now! :slight_smile:

19

2 years later, this fixed my bug in chrome