title: Update component from select value ReactJS
body: <p>There is a select which gets ID's from an API,
  then i have a table that displays data.</p>
  
  <p>if i define a state like the example this.state = {value:23};
  the table displays the data without problems from <a href="http://.../23" rel="nofollow noreferrer">http://.../23</a></p>
  
  <p>What i'm trying to achieve is that the table gets updated after change the select.
  i can get the selected value by console.log( event.target.value); but i'm getting stuck trying to pass this value to:</p>
  
  <p>&lt; Table value={this.state.value} /> </p>
  
  <p>and re-rendering the table! any help is appreciated!</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 Planet extends React.Component {
  constructor(props) {
      super(props);
      this.state = {value: 23};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(event){
      this.setState({value: event.target.value});
      console.log(event.target.value);
  }
  
  handleSubmit(event){
      this.setState({value: this.state.value});
      //event.preventDefault();
  }
  
  render () {
      let planets = this.props.state.planets;
      let optionItems = planets.map((planet) =&gt;
              &lt;option key={planet.id}&gt;{planet.id}&lt;/option&gt;
          );
  
      return (
          &lt;div&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
           &lt;select value={this.state.value} onChange={this.handleChange} className="dropbox" &gt;
              {optionItems}
           &lt;/select&gt;
           &lt;input type="submit" value="Submit" /&gt;
           &lt;/form &gt;
           &lt;Table value={this.state.value} /&gt;
           &lt;/div&gt;
      )
  }</code></pre>
  </div>
  </div>
  </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>export default class Table extends React.Component {
  
    constructor(props){
      super(props);
      this.state = {}
    }
  
  
    fetchData() {
    const url = 'http://localhost:8000/sprints/';
    const value = this.props.value;
    var string = url+value;
    fetch(string)
    .then(function(response) {
      return response.json();
    })
    .then((myJson) =&gt; this.setState(myJson));
  }
  
    componentDidMount(){
      this.fetchData();
    }
  
  render() {
      return this.state.sprints ? (
        &lt;div&gt;
          &lt;ResponseTable data={this.state.sprints} /&gt;
        &lt;/div&gt;
      ) : (
        &lt;div&gt;
           Loading ...
        &lt;/div&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>