Passing Data via Link Component using BrowserRouter in React - GeeksforGeeks (2024)

// Home.js

import React from "react";

import {

Component,

Fragment

} from "react"

import BookItem from "./BookItem"

import './Home.css'

import 'bootstrap/dist/css/bootstrap.css';

import {

Card,

CardHeader,

CardTitle,

Button,

CardFooter,

CardBody,

CardText

} from "reactstrap";

import {

Nav,

NavItem,

NavLink

} from "reactstrap";

import { Link } from "react-router-dom";

import Cart from './Cart';

const Home = ({ items, onHandleAddToCart,

onHandleCheckCartItem, clearCart }) => {

return (

<Fragment>

<div class='navigation_class'>

<Nav

card

justified

pills

>

<NavItem>

<NavLink href='/'>

Home

</NavLink>

</NavItem>

<NavItem>

<Link to='/cart'>

Cart

</Link>

</NavItem>

<NavItem>

<NavLink

onClick={() => onHandleCheckCartItem}>

Check Cart

</NavLink>

</NavItem>

</Nav>

</div>

<div>

{

//mapping a item in js

items.map((currentItem, index) => {

//alert('loop executed '+index)

return (

<Fragment>

<Card

className="my-2"

style={{

width: '97%',

margin: '20px'

}}

>

<CardHeader>

{currentItem.getName()}

</CardHeader>

<CardBody>

<CardTitle tag="h5">

{currentItem.getAuthor()}

</CardTitle>

<CardText>

Price : {currentItem.getPrice()}

</CardText>

<Button

onClick={() => onHandleAddToCart(index)}>

Add to Cart

</Button>

</CardBody>

<CardFooter>

</CardFooter>

</Card>

</Fragment>

)

})}

</div>

</Fragment>

)

}

export default Home;