How to pass a prop with an event handler function in React?

Question

I'm trying to run a simple app that renders different nicknames I've been given throughout my life in an array.

I have two total components, the pushMe component as the child button and the nameFinder as the parent. I'm trying to pass my display() method into my pushMe button component as an onClick event but the button won't render any results. I'm trying to figure out what I'm missing.

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { PushMe } from "../components/PushMe";

class MyName extends React.Component {
  display() {
    //This will keep constant range from 1-10.
    var pickNickname = Math.floor(Math.random() * 11);
    let alias = ["Terrence", "T", "TT", "Trey"];
    let name;

    //This conditional statement will decide the name by determining a number from a variable.
    if (pickNickname <= 5) {
      name = <h1>Today, my name is {alias[0]}</h1>;
    } else if ((pickNickname = 6 || 7)) {
      name = <h1> Today, my name is {alias[1]}</h1>;
    } else if ((pickNickname = 8)) {
      name = <h1> Today, my name is {alias[2]}</h1>;
    } else {
      name = <h1> Today, my name is {alias[3]}</h1>;
    }
  }

  render() {
    return (
      <div className="myNameApp">
        <PushMe display={this.display} />
      </div>
    );
  }
}

ReactDOM.render(<MyName />, document.getElementById("root"));

import React from "react";

export class PushMe extends React.Component {
  render() {
    return <button onClick={this.props.display}> Push Me </button>;
  }
}

Answer 1

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { PushMe } from "../components/PushMe";

class MyName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};
    this.display = this.display.bind(this);
  }
  display = () => {
    //This will keep constant range from 1-10.
    var pickNickname = Math.floor(Math.random() * 11);
    let alias = ["Terrence", "T", "TT", "Trey"];
    let name;

    //This conditional statement will decide the name by determining a number from a variable.
    if (pickNickname <= 5) {
      name = alias[0];
    } else if ((pickNickname = 6 || 7)) {
      name = alias[1];
    } else if ((pickNickname = 8)) {
      name = alias[2];
    } else {
      name = alias[3];
    }
    this.setState({ name });
  };

  render() {
    return (
      <div className="myNameApp">
        {this.state.name && <h1> Today, my name is {this.state.name} </h1>}
        <PushMe display={this.display} />
      </div>
    );
  }
}

ReactDOM.render(<MyName />, document.getElementById("root"));

I was able to figure it out after creating a constructor, binding my display method, and setting the state of my name variable!

Answer 2

You need to render the result in the render method once your press button. Push the value in state and render the content. Also bind the display method to access the correct context like

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { PushMe } from "../components/PushMe";

class MyName extends React.Component {
  display = () => {
    //This will keep constant range from 1-10.
    var pickNickname = Math.floor(Math.random() * 11);
    let alias = ["Terrence", "T", "TT", "Trey"];
    let name;

    //This conditional statement will decide the name by determining a number from a variable.
    if (pickNickname <= 5) {
      name = alias[0];
    } else if ((pickNickname = 6 || 7)) {
      name = alias[1]
    } else if ((pickNickname = 8)) {
      name = alias[2]
    } else {
      name = alias[3]
    }
    this.setState({name});
  }

  render() {
    return (
      <div className="myNameApp">
         {this.state.name && <h1>Today, my name is {this.state.name}</h1>} 
        <PushMe display={this.display} />
      </div>
    );
  }
}

ReactDOM.render(<MyName />, document.getElementById("root"));