Add an event to a Stateless Component in ReactJS

Question

Is there any possible way to attach an Event to a stateless Component ? Let me explain my question below:

I have a stateless component for bootstrap button as:

export const Button = props => {
  return (
    <button
      className={`btn btn-${props.type} ${props.class}`}
      type={props.buttonType}
    >
      {props.children}
    </button>
  );
};

And I'm using the <Button/> component in Parent Component called Container as:

class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  sendData() {
    // method logic
  }

  render() {
    return (
      <Button type="primary" class="">
        Save Changes
      </Button>
    );
  }
}

To call sendData() method by clicking on Button component I have tried:

<Button type="primary" onClick={() => this.sendDate()}>
  Save Changes
</Button>

But this doesn't work.

Is there any possible way to attach an event to a stateless Component to call a Method from Parent Component.

I search over the Google but was unable to find the solution to this question, so please help me if you have any solution. Thanks much :)

Answer 1

You will need to pass your event handler to your Button component and add onClick to default html button component

Try the following:

export const Button = (props) => {
    return(
        <button 
            onClick={props.onClick}
            className={`btn btn-${props.type} ${props.class}`} 
            type={props.buttonType}>
            {props.children}
        </button>
    )
}

---

class Container extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }

    sendData(e) {
        // logic here
    }

    render() { 
        return ( <Button onClick={(e) => this.sendData(e) } type='primary' class=''>Save Changes</Button> )
    }
}

Answer 2

I think what you meant is to call a function from the parent component from the child component?

So:

export const Button = (props) => {
  const buttonOnClick = this.props.buttonOnClick;

  return (
    <button 
      className={`btn btn-${props.type} ${props.class}`} 
      type={props.buttonType}
      {props.children}
      onClick={buttonOnClick(e)} // Onclick handled here calling the parent function via props.
    >
    </button>
  )
}



class Container extends Component {
    constructor(props) {
        super(props);
        this.state = { }
    }

    sendData(event) {
        // method logic
    }

    render() { 
        return ( <Button type='primary' class='' buttonOnClick={(e) => this.sendData(e)}>Save Changes</Button> )
    }
}

Basically, the sendData function is passed down from the parent function to the child as props and called via onClick.

Answer 3

export const Button = (props) => {
return(
    <button 
        className={`btn btn-${props.type} ${props.class}`} 
        type={props.buttonType}
        onClick={props.onClick}
        >
        {props.children}
    </button>
  )
}