title: How to display posted data without refresh the page?
body: <p>I have a simple react app, witch can GET and POST data to an API. It's a simple gallery where pics are categorized.</p>
  
  <p>At first step I get all galleries from API. That's work fine.</p>
  
  <pre><code>class Home extends Component {
  constructor(props) {
      super(props);
      this.state = {
          galleries: [],
          isLoading: false,
          error: null,
      };
  }
  
  componentDidMount() {
      this.setState({ isLoading: true });
  
      fetch('http://.../gallery')
          .then((response) =&gt; response.json())
          .then((data)=&gt;this.setState({galleries: data.galleries, isLoading: false}))
          .catch(error =&gt; this.setState({ error, isLoading: false}));
  }
  
  render() {
      const {galleries, isLoading, error} = this.state;
      if (error) {
          return &lt;p&gt;{error.message}&lt;/p&gt;;
      }
  
      if (isLoading) {
          return &lt;div className="loader-wrapper"&gt;&lt;div className="loader"/&gt;&lt;/div&gt;;
      }
  
      return (
          &lt;div className="categories"&gt;
              { galleries.length &gt; 0 ? galleries.map((gallery) =&gt; {
                  return (
                      &lt;Card key={gallery.path}&gt;
                          ...
                      &lt;/Card&gt;
                  )}) : null
              }          
              &lt;AddCategory/&gt; 
          &lt;/div&gt;
      );
  }
  }
  </code></pre>
  
  <p>At next step you can create new galleries.</p>
  
  <pre><code>class AddCategory extends Component {
  constructor(props) {
      super(props);
      this.state = {
          modal: false,
          galleries: [],
          isLoading: false,
          error: null,
      };
  
      this.toggle = this.toggle.bind(this);
  
      this.handleClick = this.handleClick.bind(this);
  }
  
  toggle() {
      this.setState({
          modal: !this.state.modal
      });
  }
  
  handleClick(event) {
      event.preventDefault();
      this.setState({
          modal: !this.state.modal
      });
      this.setState({ isLoading: true });
      fetch('http://.../gallery', {
          method: 'POST',
          headers: {'Content-Type':'application/json'},
          body: JSON.stringify({"name": this.galleryName.value})
      })
          .then((response) =&gt; {
              if (response.ok) {
                  return response.json();
              } else {
                  throw new Error('Something went wrong ...')
              }
          })
          .then((data)=&gt;this.setState({galleries: data.galleries, isLoading: false}))
          .catch(error =&gt; this.setState({ error, isLoading: false}));
  }
  
  render() {
      const {modal, isLoading, error} = this.state;
  
      if (error) {
          return &lt;p&gt;{error.message}&lt;/p&gt;;
      }
  
      if (isLoading) {
          return &lt;div className="loader-wrapper"&gt;&lt;div className="loader"/&gt;&lt;/div&gt;;
      }
  
      return (
          &lt;Card className="add"&gt;
              &lt;div className="link" onClick={this.toggle}&gt;
                  &lt;CardBody&gt;
                      &lt;CardTitle&gt;Add gallery&lt;/CardTitle&gt;
                  &lt;/CardBody&gt;
              &lt;/div&gt;
              &lt;Modal isOpen={modal} toggle={this.toggle} className={this.props.className}&gt;
                  &lt;div className="modal-header"&gt;
                      ...
                  &lt;/div&gt;
                  &lt;ModalBody&gt;
                      &lt;form className="form-inline addCategoryForm"&gt;
                          &lt;div className="group"&gt;
                              &lt;input type="text" ref={(ref) =&gt; {this.galleryName = ref}} id="inputGalleryName" name="galleryName" required/&gt;
                              &lt;label&gt;name of the gallery&lt;/label&gt;
                          &lt;/div&gt;
                          &lt;Button onClick={this.handleClick} color="success"&gt;Add&lt;/Button&gt;
                      &lt;/form&gt;
                  &lt;/ModalBody&gt;
              &lt;/Modal&gt;
          &lt;/Card&gt;
      );
  }
  }
  </code></pre>
  
  <p>The problem is that after I click on Add button nothing happened on the page, but after I refresh the page the new gallery is in the list.</p>
  
  <p>Do you have any idea why I get new gallery just after refresh the page, not immediately after click on button Add?</p>