reactjs Onclick event ,sending value to parent

Question

I'm fairly very new to ReactJS, JavaScript and whole coding thing.

I have made a list of array that is being passed on to child from parent component, now I want to make a onClick event that whenever user click on any of that list item.

The value (used as key id) is sent back to the parent, so the parent can send that key value to another child which will use conditional rendering based on that key to which component to render. I preferably don't want to use any other library like flux.

I am stuck as I can;t pass that value from child back to parent. There is some confusion about syntax I think or maybe my logic is not correct. I have only able to bind it to a function within the child class to check if the click is being registered.

class Parent extends React.Component {   
 render() {
var rows = [];
this.props.listlinkarray.forEach(function(linklist) {
 rows.push(<Child linklist={linklist} key={linklist.key} />);
 });
return (
 <div> 
 <h3> ListHead </h3>
 {rows}

 </div>

);
}}

class Child extends React.Component {
// was checking how the Onclick event works //
getComponent(data,event) {    
  console.log('li item clicked!');
  console.log(data);
  event.currentTarget.style.backgroundColor = '#ccc';
}  
render() {
return (
<div>
   <ul><li onClick={this.getComponent.bind(this,this.props.linklist.key)}>

</div>
   );
  }
 }

Array has this data

var ListNameAndLinks= [
{ name:'ABC', key:1} ,
{ name:'BCD', key:2} 
 ];

I want to pass the value the parent get from child based on click to this class so it can render based on that value it get.

class Check extends React.Component {
 render() {
   var i = 1 
// i want that value from parent to this component in if condition
   if (i=1) { 
  return <UIone />;
}
 return <UItwo />;
 }
}

Mayank Shukla · Accepted Answer · 2017-01-25 13:11:17Z

6

Pass a onClick method from parent component, like this:

this.props.listlinkarray.forEach((linklist)=>{
    rows.push(<Child linklist={linklist} key={linklist.key} onClick={this.onClick.bind(this)}/>);
 });

Define this function in Parent:

onClick(key){
    console.log(key);
}

In Child Component call this method and pass the id back to parent, like this:

getComponent(key) {
   this.props.onClick(key);
}

It will work.

Check the jsfiddle for working example: https://jsfiddle.net/ahdqq5yy/

edited Jan 25, 2017 at 13:11

answered Jan 25, 2017 at 13:00

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

2 Comments

Jheenga Over a year ago

it works thank you. however i want to know this.props.listlinkarray.forEach((linklist)=>{ rows.push(<Child linklist={linklist} key={linklist.key} onClick={this.onClick.bind(this)}/>); }); the use of => in this code..

Mayank Shukla Over a year ago

this is called arrow function, since we need to use this keyword inside map function, so we have to maintain the context also, if u use normal function then u have to use .bind(this) with callback function, arrow function used to do this for us. read the advantage of using arrow functions.

Collectives™ on Stack Overflow

reactjs Onclick event ,sending value to parent

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related