title: React - how to rerender component after POST data to database (mongodb)
body: <p>I'm building app which sends data to my database (mongodb). In ComponentDidMount I fetch data from this database, save them in this.state and show them in frontend. Next, I want to add another single data to this database from form in frontend. For now it works fine, couse this single data is added to database, but I have to refresh page to see new-added data.</p>
  
  <p>So, I'm wondering how to show dynamically in frontend newly added item to database.</p>
  
  <p>My first thoughts were something with component lifecycle, or maybe some function which fetch data after submit form, but this won't work.</p>
  
  <p>Any ideas?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  import Users from './Users';
  
  class Main extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              users: [],
              group: '',
              password: '',
              firstName: '',
              lastName: '',
              dateOfBirth: '',
              listOfUserGroups: ''
          };
  
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
      componentDidMount() {
          axios.get('http://localhost:3001/users')
            .then(res =&gt; {
              const users = res.data;
              this.setState({ users });
              console.log(this.state.users);
            })
      }
  
      handleGroupChange = e =&gt; {
          this.setState({ group: e.target.value });
      }
  
      handlePasswordChange = e =&gt; {
          this.setState({ password: e.target.value });
      }
  
      handleFirstNameChange = e =&gt; {
          this.setState({ firstName: e.target.value });
      }
  
      handleLastNameChange = e =&gt; {
          this.setState({ lastName: e.target.value });
      }
  
      handleDateOfBirthChange = e =&gt; {
          this.setState({ dateOfBirth: e.target.value });
      }
  
      handleListOfUserGroupsChange = e =&gt; {
          this.setState({ listOfUserGroups: e.target.value });
      }
  
      handleSubmit(e) {
          e.preventDefault();
  
          const newUser = {
              group: this.state.group,
              password: this.state.password,
              firstName: this.state.firstName,
              lastName: this.state.lastName,
              dateOfBirth: this.state.dateOfBirth,
              listOfUserGroups: this.state.listOfUserGroups
          };
  
          axios.post('http://localhost:3001/users', newUser)
              .then(response =&gt; {
                  console.log('Saved');
                  console.log(response.data);
                  console.log(this.state.firstName);
              });
      }
  
      render() {
          return (
              &lt;div&gt;
  
                  &lt;div className='mainWrapper'&gt;
                    &lt;form className='formStyle' onSubmit={this.handleSubmit}&gt;
                        &lt;label&gt;Group&lt;/label&gt;
                        &lt;input type="text" onChange={this.handleGroupChange} /&gt;
  
                        &lt;label&gt;Password&lt;/label&gt;
                        &lt;input type="text" onChange={this.handlePasswordChange} /&gt;
  
                        &lt;label&gt;First name&lt;/label&gt;
                        &lt;input type="text" onChange={this.handleFirstNameChange} /&gt;
  
                        &lt;label&gt;Last name&lt;/label&gt;
                        &lt;input type="text" onChange={this.handleLastNameChange} /&gt;
  
                        &lt;label&gt;Date of birth&lt;/label&gt;
                        &lt;input type="text" onChange={this.handleDateOfBirthChange} /&gt;
  
                        &lt;label&gt;List of user groups&lt;/label&gt;
                        &lt;input type="text" onChange={this.handleListOfUserGroupsChange} /&gt;
  
                        &lt;button type="submit"&gt;Add&lt;/button&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
  
                  &lt;Users users={this.state.users} /&gt;
  
                  &lt;div&gt;
                      &lt;ul&gt;
                          &lt;li&gt;{this.state.group}&lt;/li&gt;
                          &lt;li&gt;{this.state.password}&lt;/li&gt;
                          &lt;li&gt;{this.state.firstName}&lt;/li&gt;
                          &lt;li&gt;{this.state.lastName}&lt;/li&gt;
                          &lt;li&gt;{this.state.dateOfBirth}&lt;/li&gt;
                          &lt;li&gt;{this.state.listOfUserGroups}&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  export default Main;
  </code></pre>