title: Reactjs - Error: Objects are not valid as a React child (found: object with keys {type, data})
body: <p>I am trying to display mysql data to a table using nodejs and reactjs. For some reasom I keep the folowing error:</p>
  <p>Error: Objects are not valid as a React child (found: object with keys {type, data}). If you meant to render a collection of children, use an array instead.</p>
  <p><strong>Nodejs backend is as follows:</strong></p>
  <pre><code>app.get(&quot;/companymst&quot;, (req, res) =&gt; {
    db.query(&quot;SELECT * FROM companymst&quot;, (err, result) =&gt; {
      console.log(err);
      res.send(result);
    });
  });
  </code></pre>
  <p><strong>React front-end is as follows:</strong></p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;;
  import { Button, Container, Row, Table } from &quot;react-bootstrap&quot;;
  import axios from &quot;axios&quot;;
  
  const AllCompanies = () =&gt; {
    const [companies, setCompanies] = useState([]);
  
    useEffect(() =&gt; {
      axios.get(&quot;http://localhost:8000/companymst&quot;).then((response) =&gt; {
        setCompanies(response.data);
      });
    }, []);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;auth-wrapper&quot;&gt;
          &lt;div className=&quot;auth-inner&quot;&gt;
            &lt;Container className=&quot;container-chirag&quot;&gt;
              &lt;Row className=&quot;chirag-test&quot;&gt;
                &lt;Table striped bordered hover size=&quot;sm&quot;&gt;
                  &lt;thead&gt;
                    &lt;tr&gt;
                      &lt;th&gt;CompanyCode&lt;/th&gt;
                      &lt;th&gt;CompanyName&lt;/th&gt;
                      &lt;th&gt;Address1&lt;/th&gt;
                      &lt;th&gt;Address2&lt;/th&gt;
                      &lt;th&gt;PoBox&lt;/th&gt;
                      &lt;th&gt;City&lt;/th&gt;
                      &lt;th&gt;Province&lt;/th&gt;
                      &lt;th&gt;Country&lt;/th&gt;
                      &lt;th&gt;Phone&lt;/th&gt;
                      &lt;th&gt;Fax&lt;/th&gt;
                      &lt;th&gt;Email&lt;/th&gt;
                      &lt;th&gt;RegistrationNo&lt;/th&gt;
                      &lt;th&gt;VatNo&lt;/th&gt;
                      &lt;th&gt;PinNo&lt;/th&gt;
                      &lt;th&gt;BranchNo&lt;/th&gt;
                      &lt;th&gt;BranchHq&lt;/th&gt;
                      &lt;th&gt;StartDate&lt;/th&gt;
                      &lt;th&gt;EndDate&lt;/th&gt;
                      &lt;th&gt;Current&lt;/th&gt;
                      &lt;th&gt;RunDate&lt;/th&gt;
                      &lt;th&gt;DateCreated&lt;/th&gt;
                      &lt;th&gt;UserID&lt;/th&gt;
                      &lt;th&gt;LocationID&lt;/th&gt;
                      &lt;th colSpan=&quot;2&quot;&gt;Actions&lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                    {companies.map((val) =&gt; {
                      return (
                        &lt;tr&gt;
                          &lt;td&gt;{val.CmpnyCode}&lt;/td&gt;
                          &lt;td&gt;{val.CmpnyName}&lt;/td&gt;
                          &lt;td&gt;{val.Address1}&lt;/td&gt;
                          &lt;td&gt;{val.Address2}&lt;/td&gt;
                          &lt;td&gt;{val.PoBox}&lt;/td&gt;
                          &lt;td&gt;{val.City}&lt;/td&gt;
                          &lt;td&gt;{val.Province}&lt;/td&gt;
                          &lt;td&gt;{val.Country}&lt;/td&gt;
                          &lt;td&gt;{val.Phone}&lt;/td&gt;
                          &lt;td&gt;{val.Fax}&lt;/td&gt;
                          &lt;td&gt;{val.Email}&lt;/td&gt;
                          &lt;td&gt;{val.RegistrationNo}&lt;/td&gt;
                          &lt;td&gt;{val.VatNo}&lt;/td&gt;
                          &lt;td&gt;{val.PinNo}&lt;/td&gt;
                          &lt;td&gt;{val.BranchNo}&lt;/td&gt;
                          &lt;td&gt;{val.BranchHq}&lt;/td&gt;
                          &lt;td&gt;{val.StartDate}&lt;/td&gt;
                          &lt;td&gt;{val.EndDate}&lt;/td&gt;
                          &lt;td&gt;{val.Current}&lt;/td&gt;
                          &lt;td&gt;{val.RunDate}&lt;/td&gt;
                          &lt;td&gt;{val.DateCreated}&lt;/td&gt;
                          &lt;td&gt;{val.UserID}&lt;/td&gt;
                          &lt;td&gt;{val.LocationID}&lt;/td&gt;
                          &lt;td&gt;
                            &lt;Button variant=&quot;info&quot;&gt;Edit&lt;/Button&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                            &lt;Button variant=&quot;danger&quot;&gt;Delete&lt;/Button&gt;
                          &lt;/td&gt;
                        &lt;/tr&gt;
                      );
                    })}
                  &lt;/tbody&gt;
                &lt;/Table&gt;
              &lt;/Row&gt;
            &lt;/Container&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default AllCompanies;
  
  </code></pre>
  <p><strong>This is the response being sent from mybackend to port 8000:</strong>
  [{&quot;CmpnyCode&quot;:&quot;2&quot;,&quot;CmpnyName&quot;:&quot;Comapny1&quot;,&quot;Address1&quot;:&quot;Address1&quot;,&quot;Address2&quot;:&quot;Address2 at sth&quot;,&quot;PoBox&quot;:&quot;359&quot;,&quot;City&quot;:&quot;Nairobi&quot;,&quot;Province&quot;:&quot;Nairobi&quot;,&quot;Country&quot;:&quot;Kenya&quot;,&quot;Phone&quot;:&quot;0722811500&quot;,&quot;Fax&quot;:&quot;0773596252&quot;,&quot;Email&quot;:&quot;company@gmail.com&quot;,&quot;RegistrationNo&quot;:&quot;AK54864651&quot;,&quot;VatNo&quot;:&quot;A021547648464&quot;,&quot;PinNo&quot;:&quot;AB215486546&quot;,&quot;BranchNo&quot;:&quot;45&quot;,&quot;BranchHq&quot;:&quot;Nk&quot;,&quot;StartDate&quot;:&quot;2021-01-02T19:55:57.000Z&quot;,&quot;EndDate&quot;:&quot;2021-07-07T19:55:57.000Z&quot;,&quot;Current&quot;:{&quot;type&quot;:&quot;Buffer&quot;,&quot;data&quot;:[1]},&quot;RunDate&quot;:&quot;2021-07-04T19:55:57.000Z&quot;,&quot;DateCreated&quot;:&quot;2020-08-05T19:55:57.000Z&quot;,&quot;UserID&quot;:&quot;7895&quot;,&quot;LocationID&quot;:&quot;789564&quot;}]</p>
  <p><strong>Console.log(response) is as follows:</strong></p>
  <p>{data: Array(1), status: 200, statusText: &quot;OK&quot;, headers: {…}, config: {…}, …}
  config: {url: &quot;http://localhost:8000/companymst&quot;, method: &quot;get&quot;, headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
  data: [{…}]
  headers: {content-length: &quot;570&quot;, content-type: &quot;application/json; charset=utf-8&quot;}
  request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
  status: 200
  statusText: &quot;OK&quot;
  <strong>proto</strong>: Object</p>
  <p>I have been trying to figure out the issue for a whole week but no luck.</p>
  <p>If someone can help me figure out the issue with my code, that'd be great.</p>