Adding items to array on click Rect

Question

I am iterating through an array of objects and displaying items to the page. On button click, I would like to add the clicked item to a favourites array.

When I click on the first button multiple times the item does get added to my array multiple times. When I click on the second or third button, the item gets added but it overrides the previous items that were stored in the array. Not sure what I am doing wrong in my handleFavourites function

import React from "react";
import Tour from "./Tour";

const Tours = ({ tours }) => {
  return (
    <section>
      <div className="title">
        <h2>our tours</h2>
        <div className="underline"></div>
      </div>
      {tours.map((tour) => {
        return <Tour tour={tour} key={tour.id} />;
      })}
    </section>
  );
};

export default Tours;

import React, { useState } from "react";

const Tour = ({ tour }) => {
  const [favourites, setFavourites] = useState([]);

  const handleFavourites = () => {
    const clickedTour = {
      tour: tour.name,
    };
    setFavourites([...favourites, clickedTour]);
  };
  console.log(favourites);

  return (
    <article className="single-tour">
      <img alt={tour.name} src={tour.image} />
      <footer>
        <div className="tour-info">
          <h4>{tour.name}</h4>
          <h4 className="tour-price">${tour.price}</h4>
        </div>
        <p>{tour.info}</p>
        <button onClick={handleFavourites}>Add to favourite</button>
      </footer>
    </article>
  );
};

export default Tour;

ray · Accepted Answer · 2022-11-17 02:10:35Z

1

Each instance of your Tour component has its own independent favorites array. What you're seeing in the console is the array for the specific Tour component instance containing the clicked button.

Move the state to the parent Tours component and pass the add handler as a prop.

const Tours = ({ tours }) => {
  const [favourites, setFavourites] = useState([]);

  const handleFavourites = (tour) => {
    setFavourites([...favourites,{ tour: tour.name }]);
  };

  return (
    <section>
      <div className="title">
        <h2>our tours</h2>
        <div className="underline"></div>
      </div>
      {tours.map((tour) => {
        return (
           <Tour
             tour={tour}
             key={tour.id}
             handleFavourites={() => handleFavourites(tour)}
           />;
        )
      })}
    </section>
  );
};

answered Nov 17, 2022 at 2:10

ray

27.3k5 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding items to array on click Rect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related