Change prop when i update its value

June 20, 2022

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.

>Solution :

You forgot to update your state by using setVacation.

Also be careful with the mutation

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);
}