title: rendering data to react
body: <p>Error: Objects are not valid as a React child (found: object with keys {title, first, last}). If you meant to render a collection of children, use an array instead.</p>
  <p>getting 40 errors of this using this componentdidmount not sure what it means already tried looking it up</p>
  <pre><code>class Search extends Component {
    state = {
    results: [],
    search: &quot;&quot;,
  };
  componentDidMount() {
  API.getRandomUsers()
  // console.log(API.getRandomUsers())
  .then(res =&gt; this.setState({ results: res.data.results }))
  .catch(err =&gt; console.log(err));
  };
  
  render() {
  return (
  &lt;div&gt;
    &lt;Navbar /&gt;
    &lt;Form /&gt;
    &lt;Wrapper&gt;
    &lt;Table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Image&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Phone&lt;/th&gt;
        &lt;th&gt;Email&lt;/th&gt;
        &lt;th&gt;DOB&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;SearchResults
       results = {this.state.results} /&gt;
    &lt;/tbody&gt;
  &lt;/Table&gt;
    &lt;/Wrapper&gt;
  &lt;/div&gt;
  )}
  </code></pre>
  <p>Search results component</p>
  <pre><code>const SearchResults = (props) =&gt; {
    console.log(props)
    return (
  &lt;tr&gt;
  {props.results.map((employee, index) =&gt; {
    return (
      &lt;tr key={index}&gt;
        &lt;img alt={employee.results} className=&quot;img-fluid&quot; src={props.src} /&gt;
        &lt;td&gt; {employee.name} &lt;/td&gt;
        &lt;td&gt; {employee.phone} &lt;/td&gt;
        &lt;td&gt; {employee.email} &lt;/td&gt;
        &lt;td&gt; {employee.dob} &lt;/td&gt;
    &lt;/tr&gt;
  )})}
  </code></pre>