Delete a <div> onClick in React

Question

I would like to delete a search result by clicking on the X icon on the individual card.

The search returns 10 recipes from the API, generating 10 divs. How would I go about removing individual divs onClick of the icon whilst keeping the other divs? Essentially just a remove search result button.

return (
    <div className='App'>
      <form onSubmit={getSearch} className="search-form">
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText><FontAwesomeIcon icon={faSearch} /></InputGroupText>
          </InputGroupAddon>
          <Input className="search-bar" type="text" placeholder="Search for recipe..." value={search} onChange={updateSearch} />
        </InputGroup>
        <Button color="primary" size="sm" className="search-button" type="submit">Search</Button>
      </form>
      <div className="recipes">
        {recipes.map(recipe => (
          <Recipe
            key={recipe.recipe.label}
            title={recipe.recipe.label}
            theUrl={recipe.recipe.url}
            image={recipe.recipe.image}
            ingredients={recipe.recipe.ingredients}
            source={recipe.recipe.source}
            healthLabels={recipe.recipe.healthLabels}
            servings={recipe.recipe.yield} />
        ))}
      </div>
    </div>

const Recipe = ({ title, theUrl, image, ingredients, source, healthLabels, servings }) => {
    return (
        <div className={style.recipe}>
            <FontAwesomeIcon className={style.delete} icon={faTimes} />
            <h3 >{title}</h3>
            <Badge className={style.badge} color="primary">{source}</Badge>
            <p>Serves: <Badge color="primary" pill>{servings}</Badge></p>
            <img src={image} alt='food' />
            <ol className={style.allergens}>
                {healthLabels.map(healthLabel => (
                    <li>{healthLabel}</li>
                ))}
            </ol>
            <div className={style.ingr}>
                <ol>
                    {ingredients.map(ingredient => (
                        <li>{ingredient.text}</li>
                    ))}
                </ol>
                <Button className={style.button} outline color="primary" size="sm" href={theUrl} target="_blank">Method</Button>
            </div>
            <div className={style.info}>
                <div className={style.share}>
                    <WhatsappShareButton url={theUrl}><WhatsappIcon round={true} size={20} /></WhatsappShareButton>
                    <FacebookShareButton url={theUrl}><FacebookIcon round={true} size={20} /></FacebookShareButton>
                    <EmailShareButton url={theUrl}><EmailIcon round={true} size={20} /></EmailShareButton>
                </div>
            </div>
        </div>

    );
}

Could you make it an online demo so we can make the fix very quick! — keikai
– keikai, Commented Apr 2, 2020 at 11:04

Max · Accepted Answer · 2020-04-02 11:09:26Z

1

Simply update the recipes array and React will update the HTML.

I'm not sure where recipes comes from, but if you set an onClick on, say, <Recipe label="x"> that deletes the corresponding recipe element from recipes, then React should no longer render that recipe.

answered Apr 2, 2020 at 11:09

Max

111 bronze badge

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

Comments

Ramesh Reddy · Accepted Answer · 2020-04-02 12:40:16Z

1

That should be easy. Here's one way:

add onClick to this

<FontAwesomeIcon onClick={deleteRecipe} className={style.delete} icon={faTimes} />

pass a reference of the function that deletes the recipe.

deleteRecipeHandler = (id) => {
 // filter your recipes here such that the new recipes array doesn't contain the recipe
 // with the id you're getting here.

 // Change the below code how you need
   const newRecipes = oldRecipes.filter(recipe => {
     return recipe.id !== id;
   });
}

{recipes.map(recipe => (
          <Recipe
            key={recipe.recipe.label}
            deleteRecipe={this.deleteRecipeHandler.bind(this,recipe.recipe.id)}
            title={recipe.recipe.label}
            theUrl={recipe.recipe.url}
            image={recipe.recipe.image}
            ingredients={recipe.recipe.ingredients}
            source={recipe.recipe.source}
            healthLabels={recipe.recipe.healthLabels}
            servings={recipe.recipe.yield} />
        ))}

since you're destructuring your props you can use

const Recipe = ({ title, theUrl, image, ingredients, source, healthLabels, servings, deleteRecipe }) => {
    return (
        <div className={style.recipe}>
            <FontAwesomeIcon onClick={deleteRecipe} className={style.delete} icon={faTimes} />

edited Apr 2, 2020 at 12:40

answered Apr 2, 2020 at 11:15

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

3 Comments

sambaileyy Over a year ago

Hey! Thanks for your answer. What do you mean here: // filter your recipes here such that the new recipes array doesn't contain the recipe // with the id you're getting here.

Ramesh Reddy Over a year ago

I meant to update your recipes array. Wait, I'll update my answer.

sambaileyy Over a year ago

useEffect(() => { getRecipes(); }, [query]) const getRecipes = async () => { const response = await fetch(api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}&from=0&to=10&calories=591-722&health=alcohol-free

)     const data = await response.json();     setRecipes(data.hits);   }    const updateSearch = e => {     setSearch(e.target.value);   }   const getSearch = e => {     e.preventDefault();     setQuery(search);     setSearch('');   }

Collectives™ on Stack Overflow

Delete a <div> onClick in React

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related