title: React - Passing value between components
body: <p>I'm practicing React by trying to solve a puzzle. If anyone could help me get a bit further, I would appreciate it. </p>
  
  <p>Essentially I have two components, an input and a table. The input should be a number to place in the bottom-left cell of a table, it starts with a number N and increments by X from LTR then up. I will later want to let the user increment RTL, but I'm focusing for now on just getting the table and input interacting. </p>
  
  <p>For the input element I have this:
  <a href="https://codepen.io/anon/pen/jZYKQJ" rel="nofollow noreferrer">https://codepen.io/anon/pen/jZYKQJ</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class NForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {valueOfN: ''};
  
      this.handleChangeOfN = this.handleChangeOfN.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({valueOfN: event.target.value});
    }
  
    handleSubmit(event) {
      alert('A name was submitted: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;label&gt;
            N:
            &lt;input type="text" value={this.state.valueOfN} onChange={this.handleChangeOfN} /&gt;
          &lt;/label&gt;
          &lt;input type="submit" value="Submit" /&gt;
        &lt;/form&gt;
      );
    }
  }
  
  ReactDOM.render(
    &lt;NameForm /&gt;,
    document.getElementById('root')
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id=table-component&gt;Loading...&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Then getting the table element to even get the value of N is where I am stuck. 
  I've tried a couple different datatables, including one from a tutorial <a href="https://flaviocopes.com/react-spreadsheet/" rel="nofollow noreferrer">https://flaviocopes.com/react-spreadsheet/</a> and trying to strip it down to its most basic element. I think I would get a bit further if I could pass the value of N from the NForm Element to my table.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { PropTypes, Component } from 'react'
  
  import {
    Table,
    TableRow,
    TableRowColumn,
    TableBody
  } from 'material-ui/Table';
  
  export default class MagicTableReact extends Component {
    constructor(props) {
      super(props);
      console.log(this.props);
      this.state = {
        data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}],
        height: '300px',
        width: '20px',
        valueOfN: '',
        valueOfX : '',
        valueOfM : '',
        valueOfW : '',
      };
    };
  
    render() {
      return (
        &lt;div  className="col-sm-3"&gt;
          &lt;div&gt;
            &lt;h1&gt;Table&lt;/h1&gt;
            &lt;Table
              valueOfN={this.state.valueOfN}
              valueOfX={this.state.valueOfX}
            &gt;
              &lt;TableBody
              &gt;
                {this.state.data.map((user, i) =&gt;
                  &lt;TableRow key={i}&gt;
                    &lt;TableRowColumn&gt;{i+1}&lt;/TableRowColumn&gt;
                    &lt;TableRowColumn&gt;{i+2}&lt;/TableRowColumn&gt;
                    &lt;TableRowColumn&gt;{i+2}&lt;/TableRowColumn&gt;
                    &lt;TableRowColumn&gt;{this.valueOfN}&lt;/TableRowColumn&gt;
  
                  &lt;/TableRow&gt;
                )}
              &lt;/TableBody&gt;
            &lt;/Table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  MagicTableReact.propTypes = {
  
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does anyone know why my table isn't receiving valueOfN</p>