Change prop when i update its value-CodePudding

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

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