I’m currently doing the React course with you guys, and it’s been great so far. However, whenever I try to run the code to pass the tutorial, the following error comes up:
// running tests When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array. (Test timed out) // tests completed
I could be doing something wrong here, but the code I’ve used is definitely correct (I’ve checked the solution, and even tried copying/pasting it across despite it being the same) and I keep getting the same error.
Can someone please help? I can’t figure out what the error is, and it’s something I don’t think anyone else is having…
For future posts, if you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.
We cannot help debug this, without seeing your code as you currently have it. Would you mind posting it?
Thanks for the feedback. The code like I said is definitely right, it’s the same as on the solution (I’m setting myself up for a fall there…). Here’s the full 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>{answer}</p>
</div>
);
}
};
The issue occurs when I click ‘run’. It processes for a few seconds before throwing the error in the OP stating the test timed out.
Thanks for your help! Hopefully it’s obvious what I’ve done.
EDIT: I tried to add the bits that needed to be changed in bold but seems like you can’t if it’s classed as code. It’s the answer const, and p tag below the input.
I copy-pasta-ed it into the challenge, and ran it. Everything appears to be working as expected. So, if you are having issues with it, I would not be surprised if it has to do with your browser/browser extension.
What browser are you using? Do you have any browser extensions with access to freecodecamp.org?
