title: React: re render componet after button click
body: <p>How do I make page refresh or reender content in page after I click submit button? I've trying to put <code>window.location.reload()</code> (I know that not the React way, <code>this.forceUpdate()</code> have same result) in submit functions(<code>closeTicket()</code>, <code>openTicketSubmit()</code>) but POST request don't get response</p>
  
  <p>OpenTickets.js</p>
  
  <pre><code>import React from "react";
  import axios from "axios";
  
  import CardConversation from './CardConversation.jsx';
  
  export default class PersonList extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              people: [],
              send_to_number: "",
              message_body: ""
          };
  
          this.closeTicket = this.closeTicket.bind(this);
          this.openTicketsReply = this.openTicketsReply.bind(this);
          this.openTicketsSubmit = this.openTicketsSubmit.bind(this);
          this.getPhoneNumberOpenTickets = this.getPhoneNumberOpenTickets.bind(this);
      }
  
      openTicketsReply = async e =&gt; {
          this.setState({
              [e.target.name]: e.target.value
          });
      };
  
      getPhoneNumberOpenTickets = async e =&gt; {
          this.setState({
              send_to_number: e
          });
      };
  
      openTicketsSubmit = async e =&gt; {
          e.preventDefault();
          const formData = new FormData();
          formData.set("send_to_number", this.state.send_to_number.slice(1));
          formData.set("message_body", this.state.message_body);
          axios({
              method: "post",
              url: "/outgoingsms",
              data: formData,
              headers: { "Content-Type": "multipart/form-data" }
          })
      };
  
      closeTicket = async e =&gt; {
          e.preventDefault();
          const formData = new FormData();
          formData.set("customernum", this.state.send_to_number.slice(1));
          axios({
              method: "post",
              url: "/closeticket",
              data: formData,
              headers: { "Content-Type": "multipart/form-data" }
          })
      };
  
  
      componentDidMount() {
          this.getPeopleData();
      }
  
      getPeopleData = async () =&gt; {
          try {
              const { data } = await axios.get(`/getongoing?limit=10`);
              this.setState({ people: data });
          } catch (e) {
              console.log("error: ", e);
          }
      };
  
      render() {
          const {
              closeTicket,
              openTicketsSubmit,
              getPhoneNumberOpenTickets,
              openTicketsReply
          } = this;
  
          return this.state.people.map(person =&gt; (
              &lt;CardConversation
                  person={person}
                  closeTicket={closeTicket}
                  openTicketsSubmit={openTicketsSubmit}
                  getPhoneNumberOpenTickets={getPhoneNumberOpenTickets}
                  openTicketsReply={openTicketsReply}
              /&gt;
          ));
      }
  }
  </code></pre>
  
  <p>CardConversation.jsx</p>
  
  <pre><code>import React, { useCallback, useEffect, useState } from "react";
  import { Button, Accordion, Card, Form, Row, Col } from "react-bootstrap";
  import axios from "axios";
  
  const CardConversation = ({
                                person,
                                closeTicket,
                                openTicketsSubmit,
                                getPhoneNumberOpenTickets,
                                openTicketsReply,
                            }) =&gt; {
      const [conversation, setConversation] = useState([]);
  
      // Handlers
      const handleSubmit = useCallback(
          e =&gt; {
              openTicketsSubmit(e);
          },
          [openTicketsSubmit]
      );
  
      const handleCloseTicket = useCallback(
          e =&gt; {
              closeTicket(e);
          },
          [closeTicket],
      );
  
      const handleClick = useCallback(() =&gt; {
          getPhoneNumberOpenTickets(person);
      },
          [person, getPhoneNumberOpenTickets]);
  
      const handleChange = useCallback(
          e =&gt; {
              openTicketsReply(e);
          },
          [openTicketsReply]
      );
  
      // Methods
      const fetchConversation = useCallback(async () =&gt; {
          try {
              const { data } = await axios.get(
                  "/getconvfornum?customer_number=" + person.slice(1)
              );
              setConversation(data);
          } catch (e) {
              console.log("error: ", e);
          }
      }, [person, conversation]);
  
      // Effects
      useEffect(() =&gt; {
          fetchConversation(person)
      }, [person]);
  
      return (
          &lt;Accordion defaultActiveKey="0"&gt;
              &lt;Card&gt;
                  &lt;Card.Header&gt;
                      &lt;Accordion.Toggle as={Button} variant="button" eventKey="0"&gt;
                          Conversation {person.indexOf(person)+1+ '    '}
                          Phone number: {person}
                      &lt;/Accordion.Toggle&gt;
                  &lt;/Card.Header&gt;
                  &lt;Accordion.Collapse eventKey="0"&gt;
                      &lt;Card.Body&gt;
                          {conversation.map(message =&gt; (
                              &lt;div&gt;
                                  &lt;p&gt;{message.from}&lt;/p&gt;
                                  &lt;p&gt;{message.body}&lt;/p&gt;
                              &lt;/div&gt;
                          ))}
                          &lt;Form onSubmit={handleSubmit}&gt;
                              &lt;br /&gt;
                              &lt;Form.Group as={Row} controlId="formPlaintextPassword"&gt;
                                  &lt;Col sm="10"&gt;
                                      &lt;Form.Control
                                          type="text"
                                          placeholder="Reply"
                                          name="message_body"
                                          onChange={handleChange}
                                      /&gt;
                                  &lt;/Col&gt;
                                  &lt;Button type={"submit"}
                                          onClick={handleClick} column sm="2"&gt;
                                      Reply
                                  &lt;/Button&gt;
                              &lt;/Form.Group&gt;
                          &lt;/Form&gt;
                          &lt;Form onSubmit={handleCloseTicket}&gt;
                              &lt;Form.Group&gt;
                                  &lt;Col sm="11"&gt;
                                      &lt;Button type={"submit"}
                                              onClick={handleClick} column sm="4"&gt;
                                          Close Ticket
                                      &lt;/Button&gt;
                                  &lt;/Col&gt;
                              &lt;/Form.Group&gt;
                          &lt;/Form&gt;
                      &lt;/Card.Body&gt;
                  &lt;/Accordion.Collapse&gt;
              &lt;/Card&gt;
              &lt;br /&gt;
          &lt;/Accordion&gt;
      );
  };
  
  export default CardConversation;
  </code></pre>