Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138163

How would I return an error message upon a failed search in react.js

$
0
0

I'm currently learning how to code the front end of a webpage in react.js and in order to complete the assignment, I need to return a message saying "Campground not found" when a user enters anything into the search bar that's not in my database. For example, if they type Banana instead of a real campground name, it needs to display the message. I'm sure it's relatively simple I'm just at a complete loss at this point.

Below is the code for my find.js file

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 (
    <Layout>

    <div style={{ margin: "auto auto", width: "600px", textAlign: "center" }}>
        <h1>New Mexico Camground Search</h1>
        <p><input type='text' value={this.state.search} onChange={this.handleUpdate.bind(this)}/></p>
        <div className="button-style" onClick={this.handleSearch.bind(this)}>Submit</div>

        {this.state.park ? <div>
        <br />
        <h3>{this.state.park.name}</h3> 
            <br /><img style={{maxWidth: '400px', maxHeight: "400px"}}
            src={this.state.park.image_url} /> <br />
            <h3>{this.state.park.closest_town}</h3>
            <p>{this.state.park.description} </p>

          </div> : null}





      <style jsx>{`
        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;
        }
      `}</style>
      </div>
    </Layout>
      )
  }
    }
}

export default Find;

Viewing all articles
Browse latest Browse all 138163

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>