2

I have a component which is in fact a table row:

class Row extends PureComponent {
  static propTypes = {
    user: PropTypes.shape({
      id: PropTypes.number.isRequired,
      firstName: PropTypes.string,
      lastName: PropTypes.string,
      email: PropTypes.string,
      phone: PropTypes.string
    }).isRequired
  };

  onSelect = event => {
    console.log(event);
  };

  render() {
    const { user } = this.props;
    return (
      <div className="row" onClick={event => this.onSelect(user)}>
        <div>{user.id}</div>
        <div>{user.firstName}</div>
        <div>{user.lastName}</div>
        <div>{user.email}</div>
        <div>{user.phone}</div>
      </div>
    );
  }
}

How can I pass event from the onSelect function in another component (which generates the table)?

Tholle
  • 108,070
  • 19
  • 198
  • 189
Boggers
  • 27
  • 5
  • Welcome to StackOverflow Bogdan! You could pass down a function from your parent component as a prop to `Row` and call that. – Tholle Jul 19 '18 at 14:20
  • 1
    thanks Tholle! Its a shame i havent thought about it myself, as I had already used that method previously. Thats how it looks now:
    this.props.onSelect(user)}>
     – Boggers Jul 19 '18 at 20:44
  • That looks like a nice solution. – Tholle Jul 19 '18 at 20:46
  • @BogdanNechaenko, Although your solution with work, its not a great idea fo use inline arrow function in render, check https://stackoverflow.com/questions/45053622/how-to-avoid-binding-in-render-method/45053753#45053753 – Shubham Khatri Jul 20 '18 at 05:47
  • @Shubham Khatri, it says there I can use PureComponent to solve this issue. Thats what I used in the above code – Boggers Jul 21 '18 at 20:30

0 Answers0