How to handler onClick on child component in parent component

Question

my App component like as below:

class App extends Component {
  clickHandler = () => {
    console.log('click');
  }
  render() {
    return (
      <div className="App">
        <div onClick={this.clickHandler}>Test1</div>
        <Person onClick={this.clickHandler}>Test2</Person>
      </div>

    );
  }
}

And this is my Person component:

class Person extends Component {
    render() {
        return (
            <div>{this.props.children}</div>
        )
    }
}

When i click on Test1 onClick works and show click on console, but when i click on Test2 onClick doesn't work. how to i handler onClick in parent component? i don't want pass onClick to child component.

Why don't you want to pass onClick to the child component? That's pretty much how React works, although there are different ways to get properties in children. — Dave Newton
– Dave Newton, Commented Nov 24, 2018 at 19:25

Yossi · Accepted Answer · 2018-11-24 19:14:16Z

5

This should work. Why don't you want to write it this way? You ARE passing it as a prop...

<div onClick={props.onClick}>Test</div>

answered Nov 24, 2018 at 19:14

Yossi

6,0877 gold badges50 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan · Accepted Answer · 2018-11-24 19:23:01Z

2

You need to pass onClick to the <div> in Person.

onClick is not a special prop that works everywhere in React - The only intrinsic props are key and children. Everything else needs to be wired up manually.

The reason your code doesn't work is because you're passing onClick to Person, but to the Person component, onClick is just another prop. It does nothing on it's own until you pass it to a component that understands what it means to handle a click event (which all of the built-in components in React do).

answered Nov 24, 2018 at 19:23

Dan

10.6k2 gold badges41 silver badges68 bronze badges

Comments

onejeet · Accepted Answer · 2018-11-24 19:19:39Z

1

Here is the complete solution... Checkout: https://codesandbox.io/s/vjp200rj3

Modified render function in App.

render() {
    return (
      <div className="App">
        <div onClick={this.clickHandler}>Test1</div>
        <Person clickHandler={this.clickHandler}>Test2</Person>
      </div>
    );
  }

Modified render function in Person:

  render() {
    return <div onClick={this.props.clickHandler}>{this.props.children}</div>;
  }

answered Nov 24, 2018 at 19:19

onejeet

1,1916 silver badges14 bronze badges

Comments

AbhaY · Accepted Answer · 2020-07-07 14:15:52Z

0

class Person extends Component {
    render() {
        return (
            <div onClick={propes.onClick}>{props.children}</div>
        )
    }
}

edited Jul 7, 2020 at 14:15

answered Nov 24, 2018 at 19:12

AbhaY

1267 bronze badges

1 Comment

SherylHohman Over a year ago

Thanks for your contribution. Please add an explanation, highlighting parts of your answer that addresses OP's issue, & why/how. Code only answers are generally frowned upon on SO. Adding details adds to long term value, & helps future visitors learn, so they can apply this knowledge to their own coding issues. Also, it improves quality of the answer, & hence SO as well. Higher quality answers are upvoted more often, as more users find them a good resource to refer back to. Consider editing to provide additional info, explain why you chose this approach, or highlight what OP needed to change.

Collectives™ on Stack Overflow

How to handler onClick on child component in parent component

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related