How to handler onClick on child component in parent component
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.
javascript reactjs react-component
edited Nov 24 '18 at 19:24
Dave Newton
140k18214256
asked Nov 24 '18 at 19:07
Masoud92mMasoud92m
125110
add a comment |
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.
javascript reactjs react-component
edited Nov 24 '18 at 19:24
Dave Newton
140k18214256
asked Nov 24 '18 at 19:07
Masoud92mMasoud92m
125110
Why don't you want to passonClickto the child component? That's pretty much how React works, although there are different ways to get properties in children.
– Dave Newton
Nov 24 '18 at 19:25
add a comment |
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.
javascript reactjs react-component
edited Nov 24 '18 at 19:24
Dave Newton
140k18214256
asked Nov 24 '18 at 19:07
Masoud92mMasoud92m
125110
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.
javascript reactjs react-component
javascript reactjs react-component
edited Nov 24 '18 at 19:24
Dave Newton
140k18214256
asked Nov 24 '18 at 19:07
Masoud92mMasoud92m
125110
edited Nov 24 '18 at 19:24
Dave Newton
140k18214256
asked Nov 24 '18 at 19:07
Masoud92mMasoud92m
125110
edited Nov 24 '18 at 19:24
Dave Newton
140k18214256
edited Nov 24 '18 at 19:24
Dave Newton
140k18214256
edited Nov 24 '18 at 19:24
Dave Newton
140k18214256
140k18214256
asked Nov 24 '18 at 19:07
Masoud92mMasoud92m
125110
asked Nov 24 '18 at 19:07
Masoud92mMasoud92m
125110
asked Nov 24 '18 at 19:07
Masoud92mMasoud92m
125110
125110
Why don't you want to passonClickto the child component? That's pretty much how React works, although there are different ways to get properties in children.
– Dave Newton
Nov 24 '18 at 19:25
add a comment |
Why don't you want to passonClickto the child component? That's pretty much how React works, although there are different ways to get properties in children.
– Dave Newton
Nov 24 '18 at 19:25
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
Nov 24 '18 at 19:25
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
Nov 24 '18 at 19:25
add a comment |
4 Answers
4
active
oldest
votes
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 '18 at 19:14
YossiYossi
1,8502721
add a comment |
class Person extends Component {
render() {
return (
<div onClick={this.propes.onClick}>{this.props.children}</div>
)
}
}
answered Nov 24 '18 at 19:12
AbhaYAbhaY
1443
add a comment |
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 '18 at 19:19
OneJeetOneJeet
962310
add a comment |
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 '18 at 19:23
Dan PantryDan Pantry
5,92412351
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53461502%2fhow-to-handler-onclick-on-child-component-in-parent-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 19:14
YossiYossi
1,8502721
add a comment |
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 '18 at 19:14
YossiYossi
1,8502721
add a comment |
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 '18 at 19:14
YossiYossi
1,8502721
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 '18 at 19:14
YossiYossi
1,8502721
answered Nov 24 '18 at 19:14
YossiYossi
1,8502721
answered Nov 24 '18 at 19:14
YossiYossi
1,8502721
answered Nov 24 '18 at 19:14
YossiYossi
1,8502721
1,8502721
add a comment |
add a comment |
class Person extends Component {
render() {
return (
<div onClick={this.propes.onClick}>{this.props.children}</div>
)
}
}
answered Nov 24 '18 at 19:12
AbhaYAbhaY
1443
add a comment |
class Person extends Component {
render() {
return (
<div onClick={this.propes.onClick}>{this.props.children}</div>
)
}
}
answered Nov 24 '18 at 19:12
AbhaYAbhaY
1443
add a comment |
class Person extends Component {
render() {
return (
<div onClick={this.propes.onClick}>{this.props.children}</div>
)
}
}
answered Nov 24 '18 at 19:12
AbhaYAbhaY
1443
class Person extends Component {
render() {
return (
<div onClick={this.propes.onClick}>{this.props.children}</div>
)
}
}
answered Nov 24 '18 at 19:12
AbhaYAbhaY
1443
answered Nov 24 '18 at 19:12
AbhaYAbhaY
1443
answered Nov 24 '18 at 19:12
AbhaYAbhaY
1443
answered Nov 24 '18 at 19:12
AbhaYAbhaY
1443
1443
add a comment |
add a comment |
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 '18 at 19:19
OneJeetOneJeet
962310
add a comment |
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 '18 at 19:19
OneJeetOneJeet
962310
add a comment |
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 '18 at 19:19
OneJeetOneJeet
962310
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 '18 at 19:19
OneJeetOneJeet
962310
answered Nov 24 '18 at 19:19
OneJeetOneJeet
962310
answered Nov 24 '18 at 19:19
OneJeetOneJeet
962310
answered Nov 24 '18 at 19:19
OneJeetOneJeet
962310
962310
add a comment |
add a comment |
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 '18 at 19:23
Dan PantryDan Pantry
5,92412351
add a comment |
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 '18 at 19:23
Dan PantryDan Pantry
5,92412351
add a comment |
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 '18 at 19:23
Dan PantryDan Pantry
5,92412351
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 '18 at 19:23
Dan PantryDan Pantry
5,92412351
answered Nov 24 '18 at 19:23
Dan PantryDan Pantry
5,92412351
answered Nov 24 '18 at 19:23
Dan PantryDan Pantry
5,92412351
answered Nov 24 '18 at 19:23
Dan PantryDan Pantry
5,92412351
5,92412351
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53461502%2fhow-to-handler-onclick-on-child-component-in-parent-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why don't you want to pass
onClickto the child component? That's pretty much how React works, although there are different ways to get properties in children.– Dave Newton
Nov 24 '18 at 19:25