title: How would I return an error message upon a failed search in react.js
body: <p>I'm currently learning how to code the front end of a webpage in <code>react.js</code> and in order to complete the assignment, I need to return a message saying <em>Campground not found</em> when a user enters anything into the search bar that's not in my <code>database</code>. </p>
  
  <p>For example: </p>
  
  <p>If they type <em>Banana</em> instead of a real <code>campground name</code>, it needs to display the message. I'm sure it's relatively simple I'm just at a complete loss at this point.</p>
  
  <p>Below is the code for my <strong>find.js</strong> file:</p>
  
  <pre><code>import Layout from '../components/MyLayout.js';
  import React from "react";
  import {getInfo} from '../lib/utils.js';
  
  class Find extends React.Component {
    constructor(props) {
      super(props);
      this.state={search: ""};
    }
  
    handleUpdate(evt){
      this.setState({search: evt.target.value});
    }
  
    async handleSearch(evt){
      const park = await getInfo(this.state.search);
      this.setState({park});
    }
  
  render() {
    return (
      &lt;Layout&gt;
      &lt;div style={{ margin: "auto auto", width: "600px", textAlign: "center" }}&gt;
          &lt;h1&gt;New Mexico Camground Search&lt;/h1&gt;
          &lt;p&gt;&lt;input type='text' value={this.state.search} onChange={this.handleUpdate.bind(this)}/&gt;&lt;/p&gt;
          &lt;div className="button-style" onClick={this.handleSearch.bind(this)}&gt;Submit&lt;/div&gt;
          {this.state.park ? &lt;div&gt;
          &lt;br /&gt;
          &lt;h3&gt;{this.state.park.name}&lt;/h3&gt; 
              &lt;br /&gt;&lt;img style={{maxWidth: '400px', maxHeight: "400px"}}
              src={this.state.park.image_url} /&gt; &lt;br /&gt;
              &lt;h3&gt;{this.state.park.closest_town}&lt;/h3&gt;
              &lt;p&gt;{this.state.park.description} &lt;/p&gt;
            &lt;/div&gt; : null}
        &lt;style jsx&gt;{`
          h1,
          a {
            font-family: 'Sans';
            color: #ffa500;
          }
          h2,
          a {
              font-family: 'Sans'
              color: #ffa500;
          }
          .button-style {
              margin: auto auto;
              cursor: pointer;
              background-color: #ffa500;
              color: #ffffff;
              width: 100px;
              font-family: "Sans";
          }
          ul {
            padding: 10;
          }
          li {
            list-style: none;
            margin: 5px 0;
          }
          a {
            text-decoration: none;
            color: blue;
          }
          a:hover {
            opacity: 0.6;
          }
        `}&lt;/style&gt;
        &lt;/div&gt;
      &lt;/Layout&gt;
        )
    }
      }
  }
  
  export default Find;
  </code></pre>