CODEWITHSUNDEEP
reactjs
Davi Moreira
Davi Moreira

Reputation: 25

Create a error message for no results in React.js

i'm actually new at react, as a part of my intro a made one web app who picks some recipes from a API, actually everything is ok, but i want to made a message of "No results found" when the item searched return no results, but i don't really know where i made this. Here some of my actually code.

App.js

const App = () => {

  const APP_ID = "x";
  const APP_KEY = "x";

  const [recipes, setRecipes] = useState([]);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState('chicken');

  useEffect( () => {
    getRecipes()
  }, [query]);

  const getRecipes = async () => {
    const response = await fetch(`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`
    );
    const data = await response.json()
    setRecipes(data.hits);
    console.log(data)
  };

  const updateSearch = e => {
    setSearch(e.target.value)
  };

  const getSearch = e => {
    e.preventDefault();
    setQuery(search);
    setSearch("");
  };

  return (
    <div className="App">
      <form onSubmit={getSearch} className="search-form">
        <input 
          placeholder="Search recipes here" 
          className="search-bar" 
          type="text" 
          value={search} 
          onChange={updateSearch} 
        />
        <button 
        className="search-button" 
        type="submit">
          Buscar
        </button>
      </form>
      <div className="recipes">
      {recipes.map(recipe => (
        <Recipe
          key={recipe.recipe.label}
          title={recipe.recipe.label}
          calories={recipe.recipe.calories}
          image={recipe.recipe.image}
          ingridients={recipe.recipe.ingredients}
        />
      ))}
    </div>
  </div>
  );
};
export default App;

recipe.js

const Recipe = ({title,calories,image,ingridients}) => {
    return (
        <div className={style.quadrado}>
            <h1 className={style.recipe}>{title}</h1>
            <ol className={style.list}>
                {ingridients.map(ingridient =>(
                    <li>{ingridient.text}</li>
                ))}
            </ol>
            <img className={style.images} src={image} alt=""/>
            <p>Calories: {calories}</p>
        </div>
    );
};

export default Recipe;

i make a connection with the "Edamam" API and get a list of recipes and then render on my web app, but when there's no results i want to put a message saying "Sorry, no results found".

I read some articles here, but i confess that react is kind confuse for me yet.

Thank you for you time!

Upvotes: 1

Views: 2127

Answers (1)

lewislbr
lewislbr

Reputation: 1172

You could do:

{recipes.lenght === 0 ? (<div>Sorry, no results found</div>) 
    : recipes.map(recipe => (
        <Recipe
          key={recipe.recipe.label}
          title={recipe.recipe.label}
          calories={recipe.recipe.calories}
          image={recipe.recipe.image}
          ingridients={recipe.recipe.ingredients}
        />
      ))}

You can check an example about this implementation: https://stackblitz.com/edit/react-typescript-usefetch

Upvotes: 3

Related Questions