I want to include a button element in my react component that brings a new random qoute every time it’s clicked but I am currently stuck because the button just won’t work. What should I change or what am I doing wrong. I am new to react and this is my first challenge
constructor(props) {
super(props);
this.state = { qoute: "", randomQoute: "" };
this.newQoute = this.newQoute.bind(this);
}
async componentDidMount() {
let response = await fetch("https://type.fit/api/quotes");
let data = await response.json();
this.setState({ qoute: data });
let randomIndex = Math.floor(Math.random() * data.length);
this.setState({ randomQoute: data[randomIndex] });
}
//this is function that is called every time the button is clicked
newQoute() {
let randomIndex = Math.floor(Math.random() * data.length);
this.setState((state) => ({ randomQoute: state.qoute[randomIndex] }));
}
render() {
return (
<div>
<h1>Quotes</h1>
<h2>{this.state.randomQoute.text}</h2>
//this is the button element
<button onClick={this.newQoute}>New Qoute</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));