title: React generate table on submit multiple times
body: <p>I use the speedskatingsresults.com API. The user enters his name. This gives a skater ID and with this ID the personal records are retrieved and returned in a table.</p>
  
  <p>I have three components. App.js, InputResults.js and Table.js. In InputResults.js I get the skater ID. In Table.js, the ID is used to retrieve the personal records.</p>
  
  <p><strong>My problem is:</strong>
  For example, when I enter "Joeri Groot", I get a table with the correct results. When I enter a name for the second time, for example "Camiel Groot", the table remains instead of being replaced with the correct ID. Can someone help me with this problem?</p>
  
  <pre><code>
  InputResults.js
  
  import React, { Component } from 'react';
  import Table from './Table';
  
  class SkaterName extends Component {
      constructor(){
          super();
          this.state = {
              skatersList: '',
          };
          this.handleSubmit = this.handleSubmit.bind(this);
      } 
  
      // Get the ID of based on the givenname and familyname in the input fields
      // Get the personal records by pasting the id in the Table component
      handleSubmit(event){
  
        event.preventDefault();
  
        const data = new FormData(event.target);
        let givenname = data.get('givenname').toLowerCase().trim().replace(/ {1,}/g," ").replace(/ /g,"+");;
        let familyname = data.get('familyname').toLowerCase().trim().replace(/ {1,}/g," ").replace(/ /g,"+");; 
  
        let url = `https://speedskatingresults.com/api/json/skater_lookup.php?givenname=${givenname}&amp;familyname=${familyname}`;
  
        fetch(url)
        .then(skaters =&gt; {
            return skaters.json();
        }).then(data =&gt; {
            let skatersList = data.skaters.map((skaters, index) =&gt;{
  
              return(
  
                &lt;div&gt;
                  &lt;ul key={index}&gt;
                    &lt;li onClick={this.onClick}&gt; 
                      {skaters.id} {skaters.givenname} {skaters.familyname}
                    &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;Table id={skaters.id}/&gt;
                &lt;/div&gt;
              )
  
            })
            this.setState({skatersList: skatersList});
        })
      }
  
      render() {
  
        return (
          &lt;div className="container2"&gt;
              &lt;div className="container1"&gt;  
                &lt;form onSubmit={this.handleSubmit}&gt;
                  &lt;label&gt;Firstname:&lt;/label&gt;
                  &lt;input type='text' name="givenname" value={this.givenname}/&gt;  
  
                  &lt;label&gt;Firstname:&lt;/label&gt;
                  &lt;input type='text' name="familyname" value={this.familyname}/&gt;
  
                  &lt;button&gt;Send data!&lt;/button&gt;
                &lt;/form&gt;
  
                {this.state.skatersList}
  
              &lt;/div&gt;
          &lt;/div&gt;
        )
      }
    }
  
  export default SkaterName
  
  </code></pre>
  
  <pre><code>Table.js
  
  import React, { Component } from 'react';
  
  class Table extends Component {
      constructor(){
          super();
          this.state = {
              skatersLet: [],
          };
      }
  
      componentDidMount(){
  
          let url = `https://speedskatingresults.com/api/json/personal_records?skater=${this.props.id}`;
  
          fetch(url)
          .then(records =&gt; {
              return records.json();
          }).then(data =&gt; {
  
              let skatersLet = data.records.map((skater, index) =&gt;{
                  return(        
                      &lt;tr key={index}&gt;
                          &lt;td&gt;{skater.distance}&lt;/td&gt;
                          &lt;td&gt;{skater.time}&lt;/td&gt;
                          &lt;td&gt;{skater.date}&lt;/td&gt;
                          &lt;td&gt;{skater.location}&lt;/td&gt;
                      &lt;/tr&gt;
                  )
              })
              this.setState({skatersLet: skatersLet});
              console.log(skatersLet);
              console.log(url);
          })
      }
  
      render() {
  
        return (
          &lt;div className="container2"&gt;
              &lt;div className="container1"&gt;
                  &lt;table&gt;
                      &lt;tbody&gt;
                          {this.state.skatersLet}
                      &lt;/tbody&gt;
                 &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        )
      }
    }
  
  export default Table
  
  </code></pre>