删除一个<div>反应中的点击

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>

    );
}

Answer 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.

Answer 2

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} />