How to push props to a new page on button click?

Question

I currently have a table and each cell has a button. Upon clicking the button, based on that particular day (Monday or Tuesday), class (class 1 or class 2), and name (Kev or Josh), how can I push an object related to that particular button in the table to a new page? Using, ReactJS + React Router + Redux, what would be the correct approach to this?

And when once navigated to the new page, the new page would then populate a table with the class information from the object passed in, related to button cell clicked.

Code:

http://jsfiddle.net/k7wbzc4j/16/

<table className="test-table">
  <thead>
    <tr>
      <th>List</th>
      <th colSpan="2">Monday</th>
      <th colSpan="2">Tuesday</th>
    </tr>
    <tr>
      <th>Names</th>
      <th>Class 1</th><th>Class 2</th>
      <th>Class 1</th><th>Class 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kev</td>
      <td><button>abc</button></td><td><button>def</button></td>
      <td><button>ghi</button></td><td><button>jkl</button></td>
    </tr>
    <tr>
      <td>Josh</td>
      <td><button>mno</button></td><td><button>pqr</button></td>
      <td><button>stu</button></td><td><button>vwx</button></td>
    </tr>
  </tbody>
</table>

Will accept and upvote answer. Thank you in advance

EDIT

Should the table rows data be structured like so and reference the object based on ID like the following? If so how can I locate that particular id object based on the cell location (with day, name, and class number taken into account)?

list: [
  {
    name: Kev
      monday: {
        class1: {
          id: 0,
          classTitle: abc,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class 2: {
          id: 1,
          classTitle: def,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
      tuesday: {
        class1: {
          id: 2,
          classTitle: ghi,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class 2: {
          id: 3,
          classTitle: jkl,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
  },

  {
    name: Josh, 
      monday: {
        class1: {
          id: 4,
          classTitle: mno,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class2: {
          id: 5,
          classTitle: pqr,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
      tuesday: {
        class1: {
          id: 6,
          classTitle: stu,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class2: {
          id: 7,
          classTitle: vwx,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
    }
  }
]

Answer 1

your JSFiddle doesn't use react-router or react-redux so nobody will be able to point to one particular place of your code and tell you what exactly to do differently.

that said, one typical way to do this is to use regular links (or react-router Links) inside your table instead of Buttons, where each link includes an id parameter:

/newpage/<id>

. You then declare a react-router route which maps route to component:

<Route path="newpage" component={NewPage}>
  <Route path=":classInfoId" component={NewPage} />
</Route>

. When the user visits, for example, /newpage/123 in your app then the NewPage component will be rendered. React-router will inject a params prop that looks like:

{classInfoId: 123}

. You then fetch from your Redux store the class info object with an id of 123, and display it as you wish.

Answer 2

If I'm understanding your question correctly... I'd suggest you look into the 'push' action that is part of react-router-redux.

link: https://github.com/reactjs/react-router-redux

Do a search for 'push' and look for the example where they showcase it being used as below:

store.dispatch(push('/foo'))

What they are doing there is directing the user from their existing page to the next page '/foo' without losing their state.

Because your state is maintained, once you are on your next page, you can peek into your Redux store and all of your store data should still be there.

Hope this helps.

Answer 3

You should create the dispatcher to store the object into redux state container before redirecting to next page.

Below is the code snippet.

<Button disabled={!this.state.selectedParent} onClick={this.goNextPage} />

goNextPage() {
    const {dispatch} = this.props;
    dispatch(saveSelectedOrganization({
        parentNode:this.state.selectedParent,
        organizationData: this.props.list
    }));

    browserHistory.push('/admin/orgatnizations/create');
}

Answer 4

Use redux reducers and actions.

On click event, reduce your state to store id or classTitle. I guess you are rendering the table dynamically with the data you have.

onClick = (id) => () => {
  this.props.setCurrentCell(id) // setCurrentCell is your action
  this.props.push('/new-page') // push is react-router-redux action. These actions are mapped into props with mapDispatchToProps
}

// td rendering
<td><button onClick={this.onClick(cell.id)}>{cell.classTitle}<td>

Create action for setCurrentCell to store current cell id, and inject that with mapStatesToProps into the new table.