Reputation: 135
I recently started learning React, I have a data grid in my component, On click of a Row an event is triggered. In an event handler I could fetch the Row props (values from each column of a row clicked). So what I wanted to achieve is: I have 3 buttons on Form Component which gets enabled onClick of Row in the Grid. I want to navigate to new page onClick of each button wherein I will be performing different actions for the Row selected in a grid. The problem which I am facing is, How can I pass Row props to the handler of all 3 buttons as I need the Row values to perform different operations using these buttons.
onRowclick = (row) =>
{
this.context.route.push(`path\${row.ID}`);
}
onButton1click = (row) =>
{
this.context.route.push(`path\${row.ID}`);
}
.
.
.
onButton3click = (row) =>
{
this.context.route.push(`path\${row.ID}`);
}
I need the row.ID in all three event handlers, is their some way to store this in a state so that I will be able to use this throughout the component.?
UPDATE: Below is the code to achieve this
constructor(props) {
super(props);
this.state = this.getInitState(props);
this.intitialize();
}
intitialize(){
this.selectedRow = {};
}
getInitState(props) {
return {selectedRow: undefined};
}
// on Row click storing the row object(which contains row data)
onRowClick = (row) => {
this.selectedRow = row;
}
very basic of React
Upvotes: 0
Views: 1537
Reputation: 3384
I think it's time to use REDUX.
Redux is a react framework and is used to store state in an object. Redux makes the tree of objects and you can retrieve any state through the application by using the reducer and storing state with the help of action.
Redux have a store where it stores all the state of the application.
To know full detail about redux please read this: http://redux.js.org/
Upvotes: 1