title: React How to refresh data of table component from HandleSubmit of one other component
body: <p>I'd like to refresh my Table component when i submit my form. </p>
  
  <p>Code look like this (tell me if the structure is bad.. New in React ;) )</p>
  
  <p>I don't really know how to tell to my DataProvider 
  "Refresh your data, call the api again when the form is Submit !</p>
  
  <p><br/><br/>
  App.JS
  </p>
  
  <pre><code>const App = () =&gt; (
    &lt;React.Fragment&gt;
      &lt;DataProvider endpoint="api/lead/" render={data =&gt; &lt;Table data={data} /&gt;} /&gt;
      &lt;Form endpoint="api/lead/" /&gt;
    &lt;/React.Fragment&gt;
  );
  </code></pre>
  
  <p><br/>
  DataProvider.JS
  <br/>
  </p>
  
  <pre><code>class DataProvider extends Component {
    static propTypes = {
      endpoint: PropTypes.string.isRequired,
      render: PropTypes.func.isRequired
    };
  
    state = {
        data: [],
        loaded: false,
        placeholder: "Loading..."
      };
  
    componentDidMount() {
      fetch(this.props.endpoint)
        .then(response =&gt; {
          if (response.status !== 200) {
            return this.setState({ placeholder: "Something went wrong" });
          }
          return response.json();
        })
        .then(data =&gt; this.setState({ data: data, loaded: true }));
    }
  
    render() {
      const { data, loaded, placeholder } = this.state;
      return loaded ? this.props.render(data) : &lt;p&gt;{placeholder}&lt;/p&gt;;
    }
  
  }
  export default DataProvider;
  </code></pre>
  
  <p>Table.JS
  </p>
  
  <pre><code>const Table = ({ data }) =&gt;
    !data.length ? (
      &lt;p&gt;Nothing to show&lt;/p&gt;
    ) : (
      &lt;div className="column"&gt;
        &lt;h2 className="subtitle"&gt;
          Showing &lt;strong&gt;{data.length} items&lt;/strong&gt;
        &lt;/h2&gt;
        &lt;table className="table is-striped"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              {Object.entries(data[0]).map(el =&gt; &lt;th key={key(el)}&gt;{el[0]}&lt;/th&gt;)}
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {data.map(el =&gt; (
              &lt;tr key={el.id}&gt;
                {Object.entries(el).map(el =&gt; &lt;td key={key(el)}&gt;{el[1]}&lt;/td&gt;)}
              &lt;/tr&gt;
            ))}
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    );
  Table.propTypes = {
    data: PropTypes.array.isRequired
  };
  export default Table;
  </code></pre>
  
  <p>And at the end, there is my Form : 
  </p>
  
  <pre><code>handleSubmit = e =&gt; {
          e.preventDefault();
          const { name, email, message } = this.state;
          const lead = { name, email, message };
          const conf = {
              method: "post",
              body: JSON.stringify(lead),
              headers: new Headers({ "Content-Type": "application/json" })
          };
          fetch(this.props.endpoint, conf).then(response =&gt; console.log(response));
      };
  </code></pre>
  
  <p>thanks</p>