Use Advanced JavaScript in React Render Method - Magic 8-ball

Tell us what’s happening:
I completed the challenge - the code is running and showing rendering in the DOM but im not getting credit for the last test case.

Checking the console, I’m getting a 404 Status code.

Is the server disconnected for this challenge?

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_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Safari/605.1.15.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/use-advanced-javascript-in-react-render-method

Your code is correct. The curriculum does not work with Safari or Edge, so try using Chrome or Firefox.

Thanks because I was just getting the same results and I was on Safari

Hello everybody and thanks in advance, I did pass the Challenge, and that was relatively easy, what I don’t understand is: this method ask() where in if statement we are passing this.state.userInput, where user can type what every she/he wants. What I want to say is, that condition for if statement is true or false not what every user types in input element. Why is this working!!! It looks like this if statement is checking does condition has value or not. Can somebody explain this odd behavior of if statement.

ask() {
console.log(this.state.userInput);//test for input this is different form true or false why does if statement is working
if (this.state.userInput) {
this.setState({
randomIndex: Math.floor(Math.random() * 20),
userInput: ‘’
});
}