OnClick is not working, but no errors appear in the console

Question

As I am currently learning React, I am creating a joke generator. I created a local file and was able to pull the data (jokes) and display it on the browser. Now, I am trying to create a button that when you click, it displays a random joke. I can see the joke and button, but no action is being triggered. I check the console and there are no errors. If I use onClick = {randomJoke} , then I get an error saying listener was expecting a function, not an object. Can someone point help me out and point out what is wrong?

This is how I currently have it set up:

import React from 'react'
import SportsJokesData from './SportsJokesData';

class SportsJokesApi extends React.Component {

    constructor(props){
        super(props);
        this.getRandomJoke = this.getRandomJoke.bind(this);
    }

    getRandomJoke(){
       return SportsJokesData[(SportsJokesData.length * Math.random()) << 0]

    }

    render() {
        const randomJoke =  this.getRandomJoke()
        return (
        <React.Fragment>
             <p> {randomJoke.question}</p>
            <p>{randomJoke.answer}</p>

        <button onClick={this.getRandomJoke}>
           click here
        </button>
        </React.Fragment>
        )
        }
    }
          export default SportsJokesApi;

This is how the file was originally scripted prior to adding the button.

import React from 'react'
import SportsJokesData from './SportsJokesData';

class SportsJokesApi extends React.Component {

    getRandomJoke(){
       return SportsJokesData[(SportsJokesData.length * Math.random()) << 0]

    }

    render() {
        const randomJoke =  this.getRandomJoke()
        return (
            <React.Fragment>
            <p>{randomJoke.question}</p>
            <h1>{randomJoke.answer}</h1>
            </React.Fragment>           
        )
        }
    }
          export default SportsJokesApi;

Answer 1

You cannot just return a new component on onClick event. You need to set some state first. This guide is useful: https://flaviocopes.com/react-show-different-component-on-click/

Answer 2

You need to re-render your React component, when there is a new joke. To do this store the randomJoke in the state of your React Component.

When you call this.getRandomJoke you should update the state along with it, so that a re-render of the React component is triggered. When this happens the UI will be updated with the latest value of the randomJoke

 import React from 'react' import SportsJokesData from './SportsJokesData'; const initialState = { randomJoke: null }; class SportsJokesApi extends React.Component { constructor(props) { super(props); this.getRandomJoke = this.getRandomJoke.bind(this); this.state = initialState; } getRandomJoke() { this.setState({ randomJoke: SportsJokesData[(SportsJokesData.length * Math.random()) << 0] }); } render() { const { randomJoke } = this.state; return ( <React.Fragment > <p> {randomJoke.question} </p> <p> {randomJoke.answer} </p> <button onClick = {this.getRandomJoke}>click here </button> </React.Fragment > ); } } export default SportsJokesApi;