Use Advanced JavaScript in React Render Method help

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.
I don’t know how to do what is written here " 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.". Below here is my code

  **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 */}
const answer = <p>
{answer}          
</p>

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36

Challenge: Use Advanced JavaScript in React Render Method

Link to the challenge:

2

Given you already have an array of answers, you just need to get a random index and assign to answers, yes?
Perhaps Math.random()?

2 Likes
3

can you please show me an example. Thanks

4

We aren’t going to write it for you, no.

But MDN has a ton of examples. Do any of the look close to what you need here? You need a random integer that indexes into an array, right?

1 Like
5

I don’t understand what they wrote there. Even if it is not based on what they are saying please just show me a sample. I know that you are teaching not to cheat but THANKS.

6

We won’t write the answer for you.

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

What do you think this function does?

1 Like
7

It said error PLEASE

8

How are you using it in your code? As a stand alone function it shouldn’t cause an error. In either case though, we aren’t saying to copy/paste that example, but rather look how you can use it in your code.

What do you need to do in your code? You have an array of option, and you need to grab a random one. An array is indexable, so a random index would work. Now look at what the documentation says about using Math.floor() and Math.random(). How could you use them to grab an index?

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.