mayuri
mayuri

Reputation: 135

How to store props passed on Click of an event in React

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

Answers (1)

Codesingh
Codesingh

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

Related Questions