Create a error message for no results in React.js

Question

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!

lewislbr · Accepted Answer · 2019-12-02 17:49:14Z

3

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

answered Dec 2, 2019 at 17:49

lewislbr

1,18215 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Davi Moreira Over a year ago

Thank you very so much @lewislbr i was trying to do this but at the get data part, i think is somenthing there im still learning. It worked perfectly, ty!

lewislbr Over a year ago

Glad to hear it worked! You're welcome, we're all learning 😉 Please mark my answer as solution so it can help somebody that visits this question.

Collectives™ on Stack Overflow

Create a error message for no results in React.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related