Quiero aumentar los Me gusta de un solo blog en 1 en la función incLikes y volver a poner el blog actualizado en el estado de blogs .
const App = () => { const [ blogs, setBlogs ] = useState(null) useEffect(() => { blogsService.getAll().then(initialBlogs => { setBlogs(initialBlogs) }) }, []) const incLikes = blog => { ... } ...Mi base de datos mongo contiene los siguientes blogs:
[ { "title": "The lost planet in the milky way", "author": "Ford Beeblebrox", "url": "www.goldenplanet.milky.way", "likes": 102, "id": "600aabcbf4492017c4068727" }, { "title": "How the Vogols destroyed the Earth", "author": "Michael Faraday", "url": "www.far-far-aday.com", "likes": 45, "id": "600ab1575883720a04743319" } ]Para darle un contexto más completo, así es como lo haría:
const [blogs, setBlogs] = React.useState(all_blogs); const incLikes = (blog) => { setBlogs( blogs.map((b) => { if (b.id === blog.id) b.likes++; return b; }) ); }; return ( <div className="App"> <h1>Blogs:</h1> {blogs.map((item, i) => ( <div key={i}> {item.title} (Likes: {item.likes}) --{" "} <button onClick={() => incLikes(item)}> Like</button> </div> ))} </div> );Entonces, la idea es pasar un objeto de blog a su función, luego mapear todos los objetos de blog almacenados en el estado e incrementar el correspondiente. Aquí hay una caja dearena para ti.