Aquí hay dos componentes, uno es Home.js y el otro es BlogList.js. Paso handleDelete() como accesorio a BlogList y lo uso como una función en Home.js.
Inicio.js
import {useState} from 'react'; import BlogList from './Bloglist'; const Home = () => { const handleDelete = (id) =>{ console.log(id); } const [blogs ,setBlogs] = useState([ { title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 }, { title: 'Welcome party!', body: 'lorem ipsum...', author: 'Akks', id: 2 }, { title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 } ]) return ( <div className="home"> <BlogList blogs={blogs} title="All Blogs"/> <BlogList blogs={blogs.filter((blog)=>blog.author==="mario")} handleDelete={handleDelete}/> </div> ); } export default Home;blogList.js
const BlogList = ({blogs,title,handleDelete}) => { return ( <div className="blog-list"> <h2> {title} </h2> {blogs.map(b=>( <div className="blog-preview" key={b.id}> <h2>{b.title}</h2> <p>written by {b.author}</p> <button onClick={()=> handleDelete(b.id)}></button> </div> ))} </div> ); } export default BlogList; Pero muestra un error de que handleDelete is not a function
dado que su handleDelete es accesorio opcional en el componente BlogList , primero debe verificar si está definido al pasarlo como controlador onClick al botón:
<button onClick={handleDelete ? () => handleDelete(b.id) : undefined}></button> Además, debe verificar el paquete prop-types en NPM o al menos mecanografiado básico para evitar errores similares en el futuro.