title: How to push props to a new page on button click?
body: <p>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? </p>
  
  <p>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. </p>
  
  <p>Code:</p>
  
  <p><a href="http://jsfiddle.net/k7wbzc4j/16/" rel="nofollow noreferrer">http://jsfiddle.net/k7wbzc4j/16/</a></p>
  
  <pre><code>&lt;table className="test-table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;List&lt;/th&gt;
        &lt;th colSpan="2"&gt;Monday&lt;/th&gt;
        &lt;th colSpan="2"&gt;Tuesday&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;Names&lt;/th&gt;
        &lt;th&gt;Class 1&lt;/th&gt;&lt;th&gt;Class 2&lt;/th&gt;
        &lt;th&gt;Class 1&lt;/th&gt;&lt;th&gt;Class 2&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Kev&lt;/td&gt;
        &lt;td&gt;&lt;button&gt;abc&lt;/button&gt;&lt;/td&gt;&lt;td&gt;&lt;button&gt;def&lt;/button&gt;&lt;/td&gt;
        &lt;td&gt;&lt;button&gt;ghi&lt;/button&gt;&lt;/td&gt;&lt;td&gt;&lt;button&gt;jkl&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Josh&lt;/td&gt;
        &lt;td&gt;&lt;button&gt;mno&lt;/button&gt;&lt;/td&gt;&lt;td&gt;&lt;button&gt;pqr&lt;/button&gt;&lt;/td&gt;
        &lt;td&gt;&lt;button&gt;stu&lt;/button&gt;&lt;/td&gt;&lt;td&gt;&lt;button&gt;vwx&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Will accept and upvote answer. Thank you in advance</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>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)? </p>
  
  <pre><code>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,
            }
          }
        },
      }
    }
  ]
  </code></pre>