onPress Event

by Allie Yu

HTML

<div id="app"></div>
<!-- https://blog.logrocket.com/a-guide-to-react-onclick-event-handlers-d411943b14dd -->

React

class CustomButton extends React.Component {
  render() {
    const { onPress, children } = this.props;

    return (
      <button type="button" onClick={onPress}>
        {children}
      </button>
    );
  }
}
//CustomButton component is passed a prop of onPress, which then gets passed into the onClick of the button.

class ChangeInput extends React.Component {
  handleEvent = () => {
    alert("I was clicked");
  };

  render() {
    return (
      <div>
        <CustomButton onPress={this.handleEvent}>Click on me</CustomButton>
      </div>
    );
  }
}


const rootElement = document.getElementById("app");
ReactDOM.render(<ChangeInput />, rootElement);