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

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

#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:


#2

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


#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


#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>
    );
  }
};

#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.


#11

You can also try destructing the state.

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

#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.


#15

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


#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.