Display a random item from a collection in state is not working-CodePudding

I am trying to have it so when a person clicks on the Your Fortune button, a random fortune appears. Instead the fortunes just all show up and the onClick does not work as intended. I am confused as to where I might have messed up. Any help is appreciated.

import React from "react";
import {Link} from "react-router-dom"

class Fortune extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        fortunes: [
            "An exciting opporunity lies ahead",
            "A long time friend will brirng wise advice in the coming week",
            "You will find great fortunes in unexpected places",
            "Never give up... Unless you want to thats cool too",
            "111",
            "222",
            "333",
            "444",
            "Maybe a nap is what you need",
            "Don't Text Your EX!"
        ],
        fortune: ""
    }
}

componentDidMount() {
    this.getFortune();
}

getFortune = () =>  {
    let rand = Math.floor(Math.random() * (this.state.fortunes.length)   0)
    console.log(rand);
    this.setState({
        fortune: this.state.fortunes[rand]
    })
}



render() {
    return (
        <body>
        <div className="home-buttons-wrapper">
            
            <button onClick={Fortune.getFortune}>Your Fortune</button>
            <h5>{this.state.fortunes}</h5>
            
        </div>
        </body>
    )
}
}

console.log('getFortune');

export default Fortune;

CodePudding user response：

onClick={Fortune.getFortune}

should be:

onClick={this.getFortune}

and

<h5>{this.state.fortunes}</h5>

should be without trailing 's' (that's why you see the entire collection)

<h5>{this.state.fortune}</h5>