"Build a Random Quote Machine" Having trouble

JavaScript
1

Tell us what’s happening:
It says I need to close the element, but I have a closing tag.
Your code so far
https://codepen.io/DKPK/pen/yLgJrvw

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

2

In React the could be only one root JSX element. If you have many, you should wrap them in an empty element:

      <>
        <Title />
        <div id="quote-box">
          <button onClick={this.increment}>{this.state.BT}</button>
        </div>
      </>
1 Like
3

I have now a function, but it’s in my object and is not working? How can I make random function with the length of my array the correct way?

min = 0;
max = array.length - 1;
4

Why did you put the function in the object?

1 Like
5

I find React confusing.
Because I add the array there.

6

Add it like other functions (increment, handleChange) in the class body and call it using this.mathR and reference Country via this.state.Country.

1 Like
7

id even say you should put those function outside the class body. They can be defined on their own and called anywhere in your code to execute what they are meant to do. They are not like the class method(handleChange) which is meant to interact with the element own state

1 Like
8

Why is my text not showing up?

I tried this {this.state.Country[this.state.NumberR]}

9

I have 1 last issue, display the quote.

10

You have typo on line 104:

<h2 id="author">{this.state.Capital[this.state.numberR]}</h2>
                                               ^
1 Like
11

Thanks, fixed it but, when I tap the button it’s not making a random number.

12

Your onClick handler in button doesn’t do anything. You must pass a function.

1 Like
13 
onClick={this.increment, this.handleChange, this.MathR}

Why is this not the functions?

14

The function is the stuff between curly braces {}
How this is a function?

this.increment, this.handleChange, this.MathR
1 Like
15 
onClick={this.increment}
 onClick={this.handleChange}
 onClick={this.MathR}

I tried this and


onClick={{this.increment}, {this.handleChange}, {this.MathR}}

It’s between curly braces

It looked like this onClick={this.increment, this.handleChange, this.MathR}

This is not a function onClick{this.increment} ?

16
1 Like
17

Works now, except index 0 only works.

18

Thanks, I made some mistake with Math.random, now it works. :sweat_smile:

The link you sent me solved the problem also.
And all the other stuff you helped me with, thanks.

19

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