Problem with React Tests Timing Out

JavaScript
1

Tell us what’s happening:
I’m having an issue where by code is timing out when I’m running the test (this is happening for a couple of tasks not just this one). Yet, when I check my code against the solution my code is right and even copying/pasting the solution still replicates the timeout issue.

Is this a server issue currently happening or am I doing something completely wrong?

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];

  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>
{answer}          
</p>
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15.

Challenge: Use Advanced JavaScript in React Render Method

Link to the challenge:

2

Hey,

I’m not getting a timeout issue with your code. If you open the console on your browser, you’ll notice that inputStyle is undefined and that’s why the code is not running. After fixing that, the tests passed for me.

Hope that helps!

3

If you are unfamiliar, react is a javascript framework, authored by Facebook, that breaks up the DOM into constituent components. The components are essentially idempotent, and the framework updates the DOM very quickly by use of an internal state machine (fed by the components) and by diffing the new DOM state against the previous version of the DOM. This conservative approach allows the DOM to be updated very quickly.

4

Thanks. I tried running the code in another browser and that fixed it!