Use Advanced JavaScript in React Render Method: What's happening

JavaScript
1

I passing all test, but i can’t understand why i have to enter text into the textbox and click the button to render answer. Can anybody explain to me?
Thanks!

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] // << change code here
    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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36.

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

2

Clicking on the button calls ask function, which sets a random number into randomIndex in the state.

When the state changes, the component gets rerendered, then answer does get assigned to a number.

const answer = possibleAnswers[this.state.randomIndex] // change code here

Which is then rendered between <p> tags in the view.

3

Thank for reply!
If i only click the button, the answer isn’t change. i don’t understand

4

Not sure what your question is.

Try putting different number inside the input box. You will get different results.

1 Like
5

To render new answer, i have to do two actions:

  • 1 Type some text into textbox
  • 2 Click the button

Skip action 1 and perform action 2 not render new answer. Why do i need to do action 1?

My English is bad, sorry for that!

6

i think I understood your question. .
what you asked here is why you should enter something and click submit to get answer?

if that read below:

i have an array var arr=[1,2,3,4,5,6]
console.log(arr[0]) =1
console.log(arr[1])=2 right?
if you use for loop; you can acess all value and output all the element from arr. so the output will be on your browser 1,2,3,4,5,6, the next time also when the render method initiated you will get same out put.
now what if i want only a sigle value from array. ?

now let us come to react

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

name of your array is possibleAnswers right
.
if you want to out put this value on your browser one by one, you can hard cord the index valu.

for example

  • possibleAnswers [0]</>
    next time
  • possibleAnswers [1]</> like that?

    what if you want to generate this index value dynamically

    so you can do

  • possibleAnswers[Math.floor(Math.random()*20)]

    • the first time your component render, the value of this index willl be zero or one or two. according to that your value will be print out from array. now you dont have to click any where to create this random index value. just refresh your system. so that you can see the value will be diferent each time you refresh.

    ok now let us discuss about this challenge: the whole idea of this challenge is, when user enter something and click submit they have to see one randomly generated value published on browser from array. your onClick function is ask right: .
    if ask function is invoked you have to click submit button . inside that function you can see randomIndex:Math.floor(Math.random()*20): so you have to click submit button to invoke your ask function to run this . Math.floor(Math.random() * 20) method and assign that value to randomIndex;

    finally you come to your render method and say const answer = possibleAnswers[this.state.randomIndex]

    this.state.randomindex is your index value that change 0-20 each time you click. because of Math.floor(Math.random()*20) method. so each time you click you get different input. each time you click you invoke your ask function .
    if you did not understand yet. do one thing: delete your state and method
    then type the code below
    render()
    {
    const answer= possibleAnswers [Math.floor(Math.random()*20]

    return(

    {answer}

    )

    }
    ok then just refresh browser you can see different value from your array possibleAnswers will be printed on yout browser

    1 Like
    7

    I understood
    Thanks you very much