0

I have the following code:

const [galleryObj, setGalleryObj] = useState([
        {
            id: 1,
            img: "newborn_baby_feet.jpg",
            title: "New Born",
            text: "Register your baby´s first moments and experiences. We provide new born photo sessions for your baby (6 to 15 days of age)",
            bullet1: "Inside, outside and in nature themes",
            bullet2: "Movie themes and much more ideas",
            price: "Cost: $150",
            button: "Contact Us",
            linkPath: "/gallery/1"
        },
        {
            id: 2,
            img: "smashthecake_2.jpg",
            title: "Smash the Cake",
            text: "If you look for photos for your baby birthday we have many smash the cake themes to register this unique moment in your life and your baby´s.",
            bullet1: "Movies, music, cartoon and colorful themes",
            bullet2: "Colorfull photos and videos",
            price: "Cost: $100",
            button: "Contact Us",
            linkPath: "/gallery/2"
        },
        {
            id: 3,
            img: "pregnancy12.jpg",
            title: "Pregnancy",
            text: "If you are pregnant we have gorgeous ideas of pictures and videos to register in poses your pregnancy. Pictures with yourself and your family that will make this time of your life an unforgettable moment.",
            bullet1: "Pictures with yourself and your family",
            bullet2: "Photo editing and inspirational ideas",
            price: "Cost: $200",
            button: "Contact Us",
            linkPath: "/gallery/3"
        },
        {
            id: 4,
            title: "Pre Wedding",
            img: "prewedding_1.jpg",
            text: "If you are going to merry soon, you will want to get this unique moment and keep it forever. Our “pre wedding” use a diversified options of themes for your session.",
            bullet1: "Enjoy the moments before your wedding that will rest forever",
            bullet2: "Reproduce the pre-wedding´s pictures and videos during your wedding party",
            price: "Cost: $250",
            button: "Contact Us",
            linkPath: "/gallery/4"
        },
        {
            id: 5,
            img: "professional_manwithglasses.jpg",
            title: "Professional Profile",
            text: "For those who are preparing for their career, we offer the Professional Profile session.",
            bullet1: "Pictures for your professional LinkedIn profile",
            bullet2: "Hair and looks that best fit your career option",
            price: "Cost: $50",
            button: "Contact Us",
            linkPath: "/gallery/5"
        },
        {
            id: 6,
            img: "family12.jpg",
            title: "Family Session",
            text: "Our team is ready to take that picture of your family with background and colors that will make your family memory endure to the end.",
            bullet1: "Coloring background or outside themes",
            bullet2: "we are ready to make part of this moment in family",
            price: "Cost: $150",
            button: "Contact Us",
            linkPath: "/gallery/6"
        },
        {
            id: 7,
            img: "birthday7.jpg",
            title: "Birthday",
            text: "We also have teenagers 15th birthday sessions for girls and 18th for boys.",
            bullet1: "Nature, classic, pop themes",
            bullet2: "Great image effects, video editing for your birthday",
            price: "Cost: $170",
            button: "Contact Us",
            linkPath: "/gallery/7"
        },
        {
            id: 8,
            img: "social_media_2.jpg",
            title: "Social Media",
            text: "Do you want cool and beautiful pictures for your social medias like Instagram and Facebook?",
            bullet1: "Get a lot of likes from your friends",
            bullet2: "Your social media will never be the same again",
            price: "Cost: $170",
            button: "Contact Us",
            linkPath: "/gallery/8"
        }
    ])

    const [cart, setCart] = useState([]);
    const [total, setTotal] = useState(0); 

    const PurchaseHandler = (e) =>{
        let title = ?;
        let price = ?;
        let totalCart = [...cart];
        let objPurchase = {title, price};
        let totalPrice = total + price;
        totalCart.push(objPurchase);

        setCart(totalCart);
        setTotal(totalPrice);
        console.log(totalCart)

    }
       
    return(
        <div className="gallery-container">
            <h5>SERVICES</h5>
            <h1>Take a Look At The Themes And Sessions We Offer</h1>
                {
                    galleryObj.map((obj)=>{
                        return(
                            <li>
                                <Link state={obj} to={`/gallery/${obj.id}`}>
                                    <img src={obj.img}/>
                                    <h3>{obj.title}</h3>
                                    <p>{obj.text}</p>
                                    <span>{obj.bullet1}</span>
                                    <span>{obj.bullet2}</span>
                                    <br/>
                                    <span>{obj.price}</span>
                                    <button><Link to="/contact">{obj.button}</Link></button>
                                    <br/>
                                    <button onClick={PurchaseHandler}>Buy</button>
                                </Link>
                            </li>
                        )
                    })
                }
            
            <Outlet context={galleryObj}/>
            <Cart cart={cart}/> 
            <Total total={total}/>
        </div>
    )
}
export default React.memo(Gallery);`

How can I get the obj.title and obj.price of the elements inside <Link>, using my PurchaseHandler()?

I tried e.target.value, e.target.id, but didn't work. It says it cannot read property("title")

1
  • 1
    You sould update onClick event like this <button onClick={e=>PurchaseHandler(obj)}>Buy</button> Commented Jul 12, 2023 at 10:45

1 Answer 1

1

Just pass it as an arrow function with the obj.

<button onClick={(_) => PurchaseHandler(obj)}>Buy</button>
const PurchaseHandler = (e) =>{
    let title = e.title;
    let price = e.price;
    // do stuffs
}
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.