Use Advanced JavaScript in React Render Method apr19

Tell us what’s happening: I think I have the right answer, but I keep getting a timeout error. I get checkmarks on all the tests except the last one, I.e. no returned object with the answer quote. Is the problem on the server side or on my browser for my iPad Mini Retina display. Yes it is old, but I have done fine with it so far

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

Your browser information:

User Agent is: Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Mobile/15E148 Safari/604.1.

Link to the challenge:

Hey @mactechnic , maybe you can test it in your PC or Laptop.

Sounds like a browser issue, but not sure. Are you using Chrome on the device or Safari?

I have confirmed the same problem in Safari, Firefox and Brave using the same code. Interestingly, there is a bug using FreeCodeCamp with Chrome, in that the icon for keyboard is not visible and there seems to be no way to activate the keyboard. I am using iOS 12.2 and I have current, most recent versions of the four browsers. Note the first 3 browsers, Safari, Firefox and Brave appear to depend on WebKit and its JavaScript engine; however, Chrome uses its own codebase and JavaScript engine.
Having looked at the behavior of the code, I can get quote responses when I enter some alphanumeric character in the input window, I get no response when userInput is an empty string. So, my question is there is some glitch the last unit test that times out?