What do I do here...im so confuse

just help
Describe your issue in detail here.
];
const answer = ‘change me!’; // Change this line
return (





Ask the Magic Eight Ball!


Answer:



{/* Change code below this line */}

      {/* Change code above this line */}
    </p>
  </div>
);

}
}
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 = 'change me!'; // Change this line
  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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15

Challenge: Use Advanced JavaScript in React Render Method

Link to the challenge:

HI @khoi.khong20 !

Welcome to the forum!

So randomIndex is a number that is generated each time the user clicks to ask a question.
That is what this function is doing.

ask() {
  if (this.state.userInput) {
    this.setState({
      randomIndex: Math.floor(Math.random() * 20),
      userInput: ''
    });
  }
}

Your task is to change line 52,

so we get a random response from the possibleAnswers array each time.

Remember that you can use bracket notation to access elements from an array.

Hope that helps!

1 Like