so I have looked around but nothing seemed to fix my problem. I have something with react that has likes but the child component that shows the likes and also adds the likes does only update after refreshing. I tried useEffect things also but does not seem to work.
function updateLike(vacation, update) {
if(update === 0) {
vacation.likes--;
} else if (update === 1) {
vacation.likes ;
}
}
This is my function in App.js that gets triggered when someone clicks the like button.
import { faHeart, faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from 'react'
const vacationInfo = ({ vacation, setVacation, updateLike }) => {
return (
<div className="vacation">
<div className="container">
<div className="row">
<div className="vacation__banner">
<img src={vacation.images.image1} alt="" className="vacation__banner--img" />
<img src={vacation.images.image2} alt="" className="vacation__banner--img" />
<img src={vacation.images.image3} alt="" className="vacation__banner--img vacation__banner--last" />
<p onClick={() => setVacation(false)} className="close__button"><FontAwesomeIcon icon={faTimes} /></p>
</div>
<div className="vacation__pricetag">
{
vacation.price > 1000 ?
<div className="vacation__pricetag--expensive">
<p className="vacation__pricetag--para">EXPENSIVE</p>
</div>
:
<div className="vacation__pricetag--cheap">
<p className="vacation__pricetag--para">CHEAP</p>
</div>
}
</div>
<div className="vacation__description">
<h2 className="vacation__description--title">{vacation.name}</h2>
<p className="vacation__description--capital">Capital: {vacation.capital}</p>
<p className="vacation__description--para">{vacation.description}</p>
<div className="vacation__description--likes">
HERE <p onClick={() => updateLike(vacation, 1)} className="likes__add"><FontAwesomeIcon icon={faHeart} />{vacation.likes}</p>
</div>
</div>
</div>
</div>
</div>
)
}
export default vacationInfo;
This is where you can see that i have a p tag that runs the function on click and that all works but it does not update the prop that is behind it.
CodePudding user response:
You forgot to update your state by using setVacation
.
Also be careful with the mutation
So
function updateLike(vacation, update) {
if(update === 0) {
vacation.likes--;
} else if (update === 1) {
vacation.likes ;
}
}
should be
function updateLike(vacation, update) {
let newVacation = JSON.parse(JSON.stringify(vacation));
if (update === 0) {
newVacation.likes--;
} else if (update === 1) {
newVacation.likes ;
}
setVacation(newVacation);
}