onClick is not working in my react component-CodePudding

onClick (handleRecipeAdd), onClick (handleRecipeDelete) is not working

I am learning react recently and I need some help. Below I have pasted all the code.

App.js code:

    const [recipes, setRecipes] = useState(sampleRecipes)

    function handleRecipeAdd(){
        const newRecipe = {
            id: uuidv4(),
            name: 'New',
            servings: 1,
            cookTime: '1:00',
            instructions: 'Instr.',
            ingredients: [{id: uuidv4(), name: 'Name', amount: '1 Tbs'}]
        }

        setRecipes([...recipes, newRecipe])
    }

    function handleRecipeDelete(id){
        setRecipes(recipes.filter(recipe=>recipe.id !== id))
    }

    return (
       <RecipeList recipes={sampleRecipes} handleRecipeAdd={handleRecipeAdd} handleRecipeDelete={handleRecipeDelete}/>
    )

}

RecipeList Code

export default function RecipeList({recipes, handleRecipeAdd, handleRecipeDelete}) {
  return (
    <div className='recipe-list'>
        <div>
        {recipes.map(recipe => {
            return (
              <Recipe key={recipe.id} {...recipe} handleRecipeDelete={handleRecipeDelete}/>           
            )
        })}
        </div>
        <div className="recipe-list__add-recipe-btn-container">
            <button onClick={handleRecipeAdd}  className='btn btn--primary'>Add Recipe</button>
        </div>
    </div>
  )
}

Recipe Code

export default function Recipe({handleRecipeDelete}) {
  return (
    <div className='recipe'>
      <div className='recipe__header'>
            <button className='btn btn--primary mr-1'>Edit</button>
            <button onClick={()=>handleRecipeDelete(id)} className='btn btn--danger'>Delete</button>
       </div>
    </div>
  )
}

I am not getting any idea, I have searched a lot and didn't find any mistake. So help me out to fix this.

CodePudding user response：

<button onClick={(event)=>handleDelete(event.targrt.id)}>Delete</button>

CodePudding user response：

You are using props drilling here, which is not a good way but you are learning so it's ok, after props try to learn React Context API, it will help you to handle use-cases from any components.

coming to your problem

in App.js you are passing props like this <RecipeList recipes={sampleRecipes} .../> but it should like this <RecipeList recipes={recipes} .../> why recipes because this is the original state which will have a default value which will update or modified in the future.
for deleting or filtering data you need an id or index, right? but ID is best. you are passing the function with an id but you don't have an id there for a pass, you have to pass the id to that component. your code <Recipe key={recipe.id} {...recipe} handleRecipeDelete={handleRecipeDelete}/>

New code replaces {...recipe} -> id={recipe.id} <Recipe key={recipe.id} id={recipe.id} handleRecipeDelete={handleRecipeDelete}/>

and on the Recipe component receive id as an argument Recipe({id, handleRecipeDelete}), and your code will work fine.