Styjun

Old scifi movie from the 50s or 60s with men in solid red uniforms who interrogate a spy from the past

The phrase "to the numbers born"?

How to notate time signature switching consistently every measure

Correct punctuation for showing a character's confusion

What is the meaning of Triage in Cybersec world?

How to obtain a position of last non-zero element

What is the most efficient way to store a numeric range?

Finding the area between two curves with Integrate

Why are there uneven bright areas in this photo of black hole?

Is it okay to consider publishing in my first year of PhD?

How much of the clove should I use when using big garlic heads?

I am an eight letter word. What am I?

Can withdrawing asylum be illegal?

Why don't hard Brexiteers insist on a hard border to prevent illegal immigration after Brexit?

Did the UK government pay "millions and millions of dollars" to try to snag Julian Assange?

How can I define good in a religion that claims no moral authority?

Using the end of the list as an indexing variable in a for loop

Deal with toxic manager when you can't quit

If my opponent casts Ultimate Price on my Phantasmal Bear, can I save it by casting Snap or Curfew?

Can we generate random numbers using irrational numbers like π and e?

Why doesn't shell automatically fix "useless use of cat"?

Mathematics of imaging the black hole

Does HR tell a hiring manager about salary negotiations?

Why couldn't they take pictures of a closer black hole?

Passing a parameter to an event handler in the parent class from a child class ReactJS

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

I am trying to pass a parameter to an event handler in a parent class, but am having some difficulty. I have done a good amount of research and am close to answer, but something's not quite working. Below I will give a basic hypothetical example of what I would like to do that doesn't work.

class Parent extends React.Component 
 constructor(props)
 super(props);
 this.handleClick = this.handleClick.bind(this);
 

 handleClick(i)
 return event => console.log(i);
 

 render()
 return <Child onClick=this.handleClick></button>;
 


class Child extends React.Component 
 render() 
 const myVar = 2;
 return <button onClick=this.props.onClick(myVar)></button>;
 

I know the onClick prop that is passed to the Child is not a function, so I am unable to pass parameters directly to it. What is the best way to go about doing this? Thanks for you help!

javascript reactjs eventhandler

share|improve this question

edited Mar 22 at 5:59

ChrisBrownie55

1,9911823

asked Mar 22 at 4:53

Taylor GrayTaylor Gray

133

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If the onClick props is not a function, how can you call it. It has to be a function.
  
  – Vishal Gulati
  Mar 22 at 4:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What do you want your code to do in the end? Currently, it seems like your code would run fine but wouldn't do anything meaningful
  
  – ChrisBrownie55
  Mar 22 at 5:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Taylor Gray consider accepting the answer which solved your problem too.
  
  – Jibin Joseph
  Mar 22 at 5:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @godof23 both Josh Pittman and your answers were very helpful. Thanks!
  
  – Taylor Gray
  Mar 22 at 5:54
  

  
  
  
  

add a comment | 

2

I am trying to pass a parameter to an event handler in a parent class, but am having some difficulty. I have done a good amount of research and am close to answer, but something's not quite working. Below I will give a basic hypothetical example of what I would like to do that doesn't work.

class Parent extends React.Component 
 constructor(props)
 super(props);
 this.handleClick = this.handleClick.bind(this);
 

 handleClick(i)
 return event => console.log(i);
 

 render()
 return <Child onClick=this.handleClick></button>;
 


class Child extends React.Component 
 render() 
 const myVar = 2;
 return <button onClick=this.props.onClick(myVar)></button>;
 

I know the onClick prop that is passed to the Child is not a function, so I am unable to pass parameters directly to it. What is the best way to go about doing this? Thanks for you help!

javascript reactjs eventhandler

share|improve this question

edited Mar 22 at 5:59

ChrisBrownie55

1,9911823

asked Mar 22 at 4:53

Taylor GrayTaylor Gray

133

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If the onClick props is not a function, how can you call it. It has to be a function.
  
  – Vishal Gulati
  Mar 22 at 4:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What do you want your code to do in the end? Currently, it seems like your code would run fine but wouldn't do anything meaningful
  
  – ChrisBrownie55
  Mar 22 at 5:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Taylor Gray consider accepting the answer which solved your problem too.
  
  – Jibin Joseph
  Mar 22 at 5:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @godof23 both Josh Pittman and your answers were very helpful. Thanks!
  
  – Taylor Gray
  Mar 22 at 5:54
  

  
  
  
  

add a comment | 

I am trying to pass a parameter to an event handler in a parent class, but am having some difficulty. I have done a good amount of research and am close to answer, but something's not quite working. Below I will give a basic hypothetical example of what I would like to do that doesn't work.

class Parent extends React.Component 
 constructor(props)
 super(props);
 this.handleClick = this.handleClick.bind(this);
 

 handleClick(i)
 return event => console.log(i);
 

 render()
 return <Child onClick=this.handleClick></button>;
 


class Child extends React.Component 
 render() 
 const myVar = 2;
 return <button onClick=this.props.onClick(myVar)></button>;
 

I know the onClick prop that is passed to the Child is not a function, so I am unable to pass parameters directly to it. What is the best way to go about doing this? Thanks for you help!

javascript reactjs eventhandler

share|improve this question

edited Mar 22 at 5:59

ChrisBrownie55

1,9911823

asked Mar 22 at 4:53

Taylor GrayTaylor Gray

133

class Parent extends React.Component 
 constructor(props)
 super(props);
 this.handleClick = this.handleClick.bind(this);
 

 handleClick(i)
 return event => console.log(i);
 

 render()
 return <Child onClick=this.handleClick></button>;
 


class Child extends React.Component 
 render() 
 const myVar = 2;
 return <button onClick=this.props.onClick(myVar)></button>;
 

share|improve this question

edited Mar 22 at 5:59

ChrisBrownie55

1,9911823

asked Mar 22 at 4:53

Taylor GrayTaylor Gray

133

share|improve this question

edited Mar 22 at 5:59

ChrisBrownie55

1,9911823

asked Mar 22 at 4:53

Taylor GrayTaylor Gray

133

edited Mar 22 at 5:59

ChrisBrownie55

1,9911823

edited Mar 22 at 5:59

ChrisBrownie55

1,9911823

asked Mar 22 at 4:53

Taylor GrayTaylor Gray

133

asked Mar 22 at 4:53

Taylor GrayTaylor Gray

133

2 Answers
2

active

oldest

votes

2

Make the following update to your code

class Child extends React.Component
 render()
 const var = 2;
 return <button onClick= () => this.props.onClick(var) </button>;
 

Furthermore, you should refactor the following method used by parent as so. You are passing e needlessly.

handleClick(i)
 console.log(i);

The onClick on your child component was immediately invoked instead of waiting for the onClick event to fire.

share|improve this answer

edited Mar 22 at 5:08

answered Mar 22 at 5:03

Jibin JosephJibin Joseph

548110

add a comment | 

1

You can't do

handleClick(i)
 return (e => console.log(i));
 

instead, try

handleClick(i)
 console.log(i)
 

and move the event handling to where it is being called. So instead of

<button onClick=this.props.onClick(var)</button>

You want to try

<button onClick=e => this.props.onClick(var)</button>

share|improve this answer

answered Mar 22 at 5:04

Josh PittmanJosh Pittman

2,05711332

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  There are other ways to bind event handlers, above is probably the simples to get started. Here is more reading if interested medium.freecodecamp.org/…
  
  – Josh Pittman
  Mar 22 at 5:32
  

  
  
  
  

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
);



);

draft saved

draft discarded

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55293117%2fpassing-a-parameter-to-an-event-handler-in-the-parent-class-from-a-child-class-r%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

Make the following update to your code

class Child extends React.Component
 render()
 const var = 2;
 return <button onClick= () => this.props.onClick(var) </button>;
 

Furthermore, you should refactor the following method used by parent as so. You are passing e needlessly.

handleClick(i)
 console.log(i);

The onClick on your child component was immediately invoked instead of waiting for the onClick event to fire.

share|improve this answer

edited Mar 22 at 5:08

answered Mar 22 at 5:03

Jibin JosephJibin Joseph

548110

add a comment | 

2

Make the following update to your code

class Child extends React.Component
 render()
 const var = 2;
 return <button onClick= () => this.props.onClick(var) </button>;
 

Furthermore, you should refactor the following method used by parent as so. You are passing e needlessly.

handleClick(i)
 console.log(i);

The onClick on your child component was immediately invoked instead of waiting for the onClick event to fire.

share|improve this answer

edited Mar 22 at 5:08

answered Mar 22 at 5:03

Jibin JosephJibin Joseph

548110

add a comment | 

Make the following update to your code

class Child extends React.Component
 render()
 const var = 2;
 return <button onClick= () => this.props.onClick(var) </button>;
 

Furthermore, you should refactor the following method used by parent as so. You are passing e needlessly.

handleClick(i)
 console.log(i);

The onClick on your child component was immediately invoked instead of waiting for the onClick event to fire.

share|improve this answer

edited Mar 22 at 5:08

answered Mar 22 at 5:03

Jibin JosephJibin Joseph

548110

class Child extends React.Component
 render()
 const var = 2;
 return <button onClick= () => this.props.onClick(var) </button>;
 

handleClick(i)
 console.log(i);

share|improve this answer

edited Mar 22 at 5:08

answered Mar 22 at 5:03

Jibin JosephJibin Joseph

548110

answered Mar 22 at 5:03

Jibin JosephJibin Joseph

548110

answered Mar 22 at 5:03

Jibin JosephJibin Joseph

548110

1

You can't do

handleClick(i)
 return (e => console.log(i));
 

instead, try

handleClick(i)
 console.log(i)
 

and move the event handling to where it is being called. So instead of

<button onClick=this.props.onClick(var)</button>

You want to try

<button onClick=e => this.props.onClick(var)</button>

share|improve this answer

answered Mar 22 at 5:04

Josh PittmanJosh Pittman

2,05711332

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  There are other ways to bind event handlers, above is probably the simples to get started. Here is more reading if interested medium.freecodecamp.org/…
  
  – Josh Pittman
  Mar 22 at 5:32
  

  
  
  
  

add a comment | 

1

You can't do

handleClick(i)
 return (e => console.log(i));
 

instead, try

handleClick(i)
 console.log(i)
 

and move the event handling to where it is being called. So instead of

<button onClick=this.props.onClick(var)</button>

You want to try

<button onClick=e => this.props.onClick(var)</button>

share|improve this answer

answered Mar 22 at 5:04

Josh PittmanJosh Pittman

2,05711332

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  There are other ways to bind event handlers, above is probably the simples to get started. Here is more reading if interested medium.freecodecamp.org/…
  
  – Josh Pittman
  Mar 22 at 5:32
  

  
  
  
  

add a comment | 

You can't do

handleClick(i)
 return (e => console.log(i));
 

instead, try

handleClick(i)
 console.log(i)
 

and move the event handling to where it is being called. So instead of

<button onClick=this.props.onClick(var)</button>

You want to try

<button onClick=e => this.props.onClick(var)</button>

share|improve this answer

answered Mar 22 at 5:04

Josh PittmanJosh Pittman

2,05711332

handleClick(i)
 return (e => console.log(i));
 

handleClick(i)
 console.log(i)
 

<button onClick=this.props.onClick(var)</button>

<button onClick=e => this.props.onClick(var)</button>

share|improve this answer

answered Mar 22 at 5:04

Josh PittmanJosh Pittman

2,05711332

answered Mar 22 at 5:04

Josh PittmanJosh Pittman

2,05711332

answered Mar 22 at 5:04

Josh PittmanJosh Pittman

2,05711332