I am using Contentful as external container for my images.
I am building a boat visualizer using AISHub. All the vessels I am interested are injected into a table. When I click on the table I locate the marker (vessel) on the map and the image of that vessel pops up on a sidebar on the right of the map.
The problem I have is that I should also visualize the image of the vessel, but unfortunately I only visualize a weird icon as shown below:
Below the code I have so far:
import React from 'react';
import { Card, CardTitle, CardSubtitle, CardText, CardBody, CardImg } from 'reactstrap';
import '../components/SideBar.css';
import { Link } from 'react-router-dom';
import Client from '../Contentful';
class Sidebar extends React.Component {
state = {
ships: []
};
async componentDidMount() {
let response = await Client.getEntries({
content_type: 'cashmanCards'
});
const ships = response.items.map((item) => {
const { name, slug, type, company, description, images, companylogo } = item.fields;
return {
name,
slug,
type,
company,
description,
images,
companylogo
};
});
this.setState({
ships
});
}
getFilteredShips = () => {
if (!this.props.activeShip) {
return this.state.ships;
}
return this.state.ships.filter((ship) => this.props.activeShip.name.toLowerCase() === ship.name.toLowerCase());
};
render() {
return (
<div className="map-sidebar">
{this.props.activeShipTypes}
<pre>
{this.getFilteredShips().map((ship) => (
<Card className="mb-2">
<CardImg />
<CardBody>
<div className="row">
{/* <div className="column"> */}
<img className="image-sizing-primary" src={ship.companylogo} alt="shipImage" />
</div>
<div>
<img className="image-sizing-secondary" src={ship.images} alt="shipImage" />
</div>
<CardTitle>
<h3 className="thick">{ship.name}</h3>
</CardTitle>
<CardSubtitle>{ship.type}</CardSubtitle>
<CardText>
<br />
<h6>Project Details</h6>
<p>For a description of the project view the specification included</p>
</CardText>
<div class="btn-toolbar">
<SpecsButton />
<Link to="/vessels/Atchafalaya" className="btn btn-primary">
Go to vessel
</Link>
</div>
</CardBody>
</Card>
))}
</pre>
</div>
);
}
}
export default Sidebar;
EDITS:
class Sidebar extends React.Component {
state = {
ships: []
};
async componentDidMount() {
let response = await Client.getEntries({
content_type: 'cashmanCards'
});
const ships = response.items.map((item) => {
const { name, slug, type, company, description, images, companylogo } = item.fields;
return {
name,
slug,
type,
company,
description,
images,
companylogo
};
});
this.setState({
ships
});
}
getFilteredShips = () => {
if (!this.props.activeShip) {
return this.state.ships;
}
return this.state.ships.filter((ship) => this.props.activeShip.name.toLowerCase() === ship.name.toLowerCase());
};
{this.getFilteredShips().map((ship) => (
console.log(ship);
return (
<div className="map-sidebar">
<Card className="mb-2">
<CardImg />
<CardBody>
<div className="row">
<img className="image-sizing-primary" src={ship.companylogo} alt="shipImage" />
</div>
<div>
<img className="image-sizing-secondary" src={ship.images} alt="shipImage" />
</div>
<CardTitle>
<h3 className="thick">{ship.name}</h3>
</CardTitle>
<CardSubtitle>{ship.type}</CardSubtitle>
<CardText>
<br />
<h6>Project Details</h6>
<p>For a description of the project view the specification included</p>
</CardText>
<div class="btn-toolbar">
<SpecsButton />
<Link to="/vessels/Atchafalaya" className="btn btn-primary">
Go to vessel
</Link>
</div>
</CardBody>
</Card>
</div>
)))}
}
export default Sidebar;
EDITS 2:
class Sidebar extends React.Component {
state = {
ships: []
};
async componentDidMount() {
let response = await Client.getEntries({
content_type: 'cashmanCards'
});
const ships = response.items.map((item) => {
const { name, slug, type, company, description, images, companylogo } = item.fields;
return {
name,
slug,
type,
company,
description,
images,
companylogo
};
});
this.setState({
ships
});
}
getFilteredShips = () => {
if (!this.props.activeShip) {
return this.state.ships;
}
return this.state.ships.filter((ship) => this.props.activeShip.name.toLowerCase() === ship.name.toLowerCase());
};
{this.getFilteredShips().map((ship) => {
console.log(ship);
render() {
return (
<Card className="mb-2">
<CardImg />
<CardBody>
<div className="row">
{/* <div className="column"> */}
<img className="image-sizing-primary" src={ship.companylogo} alt="shipImage" />
</div>
<div>
<img className="image-sizing-secondary" src={ship.images} alt="shipImage" />
</div>
<CardTitle>
<h3 className="thick">{ship.name}</h3>
</CardTitle>
<CardSubtitle>{ship.type}</CardSubtitle>
<CardText>
<br />
<h6>Project Details</h6>
<p>For a description of the project view the specification included</p>
</CardText>
<div class="btn-toolbar">
<SpecsButton />
<Link to="/vessels/Atchafalaya" className="btn btn-primary">
Go to vessel
</Link>
</div>
</CardBody>
</Card>
)
}
})}
}
export default Sidebar;
Below a print screen on how Contentful is structured:
What I have done so far:
1) I was able to implement the table click event as well as finding the marker (vessel) and show its card on the right of a sidebar, and thought that it would have been easy to finally show the vessel image. Unfortunately the implementation does not show the image.
I should mention that I used reactstrap Cards.
Maybe there is an error in how Contentful is reading the image?
2) After researching more this problem I came across this post which was useful. The problem was that the image uploaded was local, I have an image that is external on an external container.
Thanks for pointing in the right direction.
here you go
import React from 'react';
import { Card, CardTitle, CardSubtitle, CardText, CardBody, CardImg } from 'reactstrap';
import '../components/SideBar.css';
import { Link } from 'react-router-dom';
import Client from '../Contentful';
class Sidebar extends React.Component {
state = {
ships: []
};
async componentDidMount() {
let response = await Client.getEntries({
content_type: 'cashmanCards'
});
const ships = response.items.map((item) => {
const { name, slug, type, company, description, images, companylogo } = item.fields;
return {
name,
slug,
type,
company,
description,
images,
companylogo
};
});
this.setState({
ships
});
}
getFilteredShips = () => {
if (!this.props.activeShip) {
return this.state.ships;
}
return this.state.ships.filter((ship) => this.props.activeShip.name.toLowerCase() === ship.name.toLowerCase());
};
render() {
return (
<div className="map-sidebar">
{this.props.activeShipTypes}
<pre>
{this.getFilteredShips().map((ship) => {
console.log(ship);
return (
<Card className="mb-2">
<CardImg />
<CardBody>
<div className="row">
{/* <div className="column"> */}
<img className="image-sizing-primary" src={ship.companylogo} alt="shipImage" />
</div>
<div>
<img className="image-sizing-secondary" src={ship.images} alt="shipImage" />
</div>
<CardTitle>
<h3 className="thick">{ship.name}</h3>
</CardTitle>
<CardSubtitle>{ship.type}</CardSubtitle>
<CardText>
<br />
<h6>Project Details</h6>
<p>For a description of the project view the specification included</p>
</CardText>
<div class="btn-toolbar">
<SpecsButton />
<Link to="/vessels/Atchafalaya" className="btn btn-primary">
Go to vessel
</Link>
</div>
</CardBody>
</Card>
)
})}
</pre>
</div>
);
}
}
export default Sidebar;
Related
I want to add button property which will redirect to external link when it is clicked. prop which should be added to button is siteURL .Button should be in class = "project-item-details-container". Do I have to install any external package?
sample button: Visit site
code which I have written -
const ProjectItem = props => {
const {projectDetails} = props
const {projectId, imageURL, description, title, siteURL} = projectDetails
return (
<>
<li className="project-item-container">
<img
className="project-item-image"
src={imageURL}
alt={`project-item${projectId}`}
/>
<div className="project-item-details-container">
<h1 className="project-item-title">{title}</h1>
<p className="project-item-description">{description}</p>
</div>
</li>
</>
)
}
const ProjectItem = props => {
const {projectDetails} = props
const {projectId, imageURL, description, title, siteURL} = projectDetails
return (
<>
<li className="project-item-container">
<img
className="project-item-image"
src={imageURL}
alt={`project-item${projectId}`}
/>
<div className="project-item-details-container">
<h1 className="project-item-title">{title}</h1>
<p className="project-item-description">{description}</p>
</div>
<a href={siteUrl}>{title}</a>
</li>
</>
)
}
you can do something like this
const ProjectItem = props => {
const {projectDetails} = props
const {projectId, imageURL, description, title, siteURL} = projectDetails
return (
<>
<li className="project-item-container">
<img
className="project-item-image"
src={imageURL}
alt={`project-item${projectId}`}
/>
<div className="project-item-details-container">
<h1 className="project-item-title">{title}</h1>
<p className="project-item-description">{description}</p>
<button onClick={()=>window.location.href=siteURL}>{title}</button>
</div>
</li>
</>
)
}
Well, I solved this.
I have used attribute in button element.
const ProjectItem = props => {
const {projectDetails} = props
const {projectId, imageURL, description, title, siteURL} = projectDetails
return (
<>
<li className="project-item-container">
<img
className="project-item-image"
src={imageURL}
alt={`project-item${projectId}`}
/>
<div className="project-item-details-container">
<h1 className="project-item-title">{title}</h1>
<p className="project-item-description">{description}</p>
<button type="button" className="project-redirect-button">
<a href={siteURL} alt="Broken Link">
Visit Site
</a>
</button>
</div>
</li>
</>
)
}
[enter image description here]
Hello, I'm a new developer who has been working as a frontend developer for less than a year.
I'm making a blog project to study react.
However, the following error occurred in the middle.
I've been trying for a long time to figure this out, but I just couldn't find the answer.
There are many other files, but the error file code that I think is most likely is as follows.
I would really appreciate your help.
import React, { useEffect, Fragment } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Helmet } from "react-helmet";
import {
POST_DETAIL_LOADING_REQUEST,
POST_DELETE_REQUEST,
USER_LOADING_REQUEST,
POST_DETAIL_LOADING_SUCCESS,
POST_DETAIL_LOADING_FAILURE,
} from "../../redux/types";
import { Button, Row, Col, Container } from "reactstrap";
import { Link } from "react-router-dom";
import CKEditor from "#ckeditor/ckeditor5-react";
import GrowingSpinner from "../../components/spinner/Spinner";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import {
faPencilAlt,
faCommentDots,
faMouse,
} from "#fortawesome/free-solid-svg-icons";
import BalloonEditor from "#ckeditor/ckeditor5-editor-balloon/src/ballooneditor";
import { editorConfiguration } from "../../components/editor/EditorConfig";
import Comments from "../../components/comments/Comments";
const PostDetail = (req) => {
const dispatch = useDispatch();
const { postDetail, creatorId, title, loading } = useSelector(
(state) => state.post
);
const { userId, userName } = useSelector((state) => state.auth);
const { comments } = useSelector((state) => state.comment);
console.log(req);
useEffect(() => {
dispatch({
type: POST_DETAIL_LOADING_REQUEST,
payload: req.match.params.id,
});
dispatch({
type: USER_LOADING_REQUEST,
payload: localStorage.getItem("token"),
});
}, [dispatch, req.match.params.id]);
const onDeleteClick = () => {
dispatch({
type: POST_DELETE_REQUEST,
payload: {
id: req.match.params.id,
token: localStorage.getItem("token"),
},
});
};
const EditButton = (
<Fragment>
<Row className="d-flex justify-content-center pb-3">
<Col className="col-md-3 mr-md-3">
<Link to="/" className="btn btn-primary btn-block">
Home
</Link>
</Col>
<Col className="col-md-3 mr-md-3">
<Link
to={`/post/${req.match.params.id}/edit`}
className="btn btn-success btn-block"
>
Edit Post
</Link>
</Col>
<Col className="col-md-3">
<Button className="btn-block btn-danger" onClick={onDeleteClick}>
Delete
</Button>
</Col>
</Row>
</Fragment>
);
const HomeButton = (
<Fragment>
<Row className="d-flex justify-content-center pb-3">
<Col className="col-sm-12 com-md-3">
<Link to="/" className="btn btn-primary btn-block">
Home
</Link>
</Col>
</Row>
</Fragment>
);
const Body = (
<>
{userId === creatorId ? EditButton : HomeButton}
<Row className="border-bottom border-top border-primary p-3 mb-3 d-flex justify-content-between">
{(() => {
if (postDetail && postDetail.creator) {
return (
<Fragment>
<div className="font-weight-bold text-big">
<span className="mr-3">
<Button color="info">
{postDetail.category.categoryName}
</Button>
</span>
{postDetail.title}
</div>
<div className="align-self-end">{postDetail.creator.name}</div>
</Fragment>
);
}
})()}
</Row>
{postDetail && postDetail.comments ? (
<Fragment>
<div className="d-flex justify-content-end align-items-baseline small">
<FontAwesomeIcon icon={faPencilAlt} />
<span> {postDetail.date}</span>
<FontAwesomeIcon icon={faCommentDots} />
<span>{postDetail.comments.length}</span>
<FontAwesomeIcon icon={faMouse} />
<span>{postDetail.views}</span>
</div>
<Row className="mb-3">
<CKEditor
editor={BalloonEditor}
data={postDetail.contents}
config={editorConfiguration}
disabled="true"
/>
</Row>
<Row>
<Container className="mb-3 border border-blue rounded">
{Array.isArray(comments)
? comments.map(
({ contents, creator, date, _id, creatorName }) => (
<div key={_id}>
<Row className="justify-content-between p-2">
<div className="font-weight-bold">
{creatorName ? creatorName : creator}
</div>
<div className="text-small">
<span className="font-weight-bold">
{date.split[0]}
</span>
<span className="font-weight-light">
{date.split[1]}
</span>
</div>
</Row>
<Row className="p-2">
<div>{contents}</div>
</Row>
<hr />
</div>
)
)
: "Creator"}
<Comments
id={req.match.params.id}
userId={userId}
userName={userName}
/>
</Container>
</Row>
</Fragment>
) : (
<h1>hi</h1>
)}
</>
);
console.log(comments, "Comments");
return (
<div>
<Helmet title={`Post | ${title}`} />
{loading === true ? GrowingSpinner : Body}
</div>
);
};
export default PostDetail;
<Helmet title={Post | ${title}} />
Even though you wrote the syntax above, the title value is not output.
enter image description here
The structure is as follows:
(postWrite) -> write post + click button -> save post + move postDetail page (error)
+) The code is quite long, but I'm sorry I couldn't highlight it. As for me, I have no idea which part of this file is the problem....
Just looking through the code and the error message you're seeing, there doesn't appear to be anything wrong with the exported component. Rather, it seems that the way you're importing the component might be wrong.
export default PostDetail
This means that you'll need to import the component using this syntax:
import PostDetail from './path-to-component'
I too had the same problem, mine was fixed when I used
import { CKEditor } from "#ckeditor/ckeditor5-react";
in place of
import CKEditor from "#ckeditor/ckeditor5-react";
I'm using redux in my project. I have already completed getting data from the database and display them in the UI. Now what I want to do is add a create part in the same file. I can't think of a way how to dispatch it inside connect.For the instance in my action file I'm just console logging.If it logs I know how do the rest. Could you please help me to find a way to dispatch the create function? What I need to run is the this.props.addComments(this.state.commentText); inside handleClick() function.
ViewTicket.js
import React from 'react';
import TicketAction from './../../components/TicketTable/TicketAction/TicketAction';
import {
ChevronLeft,
Archive,
ArrowClockwise,
Share,
Pencil
} from 'react-bootstrap-icons';
import Card from 'react-bootstrap/Card';
import { Row, Col } from 'reactstrap';
import { Tabs, Tab } from 'react-bootstrap';
import { connect } from 'react-redux';
import moment from 'moment';
import RichTextEditor from './../../components/EditorToolbar/RchTextEditor';
import PriorityBadge from './../../components/PriorityBadge/PriorityBadge';
import UserIcon from './../../components/UserIcon/UserIcon';
import { getTicketByID, addComments } from './actions/TicketActions';
import ActionButton from './../../components/ActionButton/ActionButton';
import './ViewTicket.scss';
class ViewTicket extends React.Component {
constructor(props) {
super(props);
this.state = {
editorText: 'This comes in the text editor',
commentText: '',
id: ''
};
}
componentDidMount() {
const { match } = this.props;
let id = match.params.id;
this.setState({
id: match.params.id
});
this.props.getTicketByID(id);
}
displayComments = () => {
if (this.props.comments[0] !== undefined) {
return this.props.comments.map((item) => {
return (
<div>
<Row style={{ marginBottom: 40 }}>
<Col sm={1} className="user-avatar">
<UserIcon name="Sam Smith" size="40" />
</Col>
<Col sm={7}>
<div className="text p2">
<p2>Sam Smith</p2>
</div>
<div className="text p4">
<p4>{item.description}</p4>
</div>
</Col>
<Col sm={4} className="comment-date-text text p4">
<p4>December 27 ,2020,11.02 AM</p4>
</Col>
</Row>
<div className="hr-line"></div>
</div>
);
});
}
};
handleChangeInputs = (event) => {
this.setState({ commentText: event });
console.log(this.state.commentText);
};
handleClick = () => {
console.log('Handle Click');
console.log(this.state.commentText);
this.props.addComments(this.state.commentText);
};
render() {
let {
id,
title,
employer,
description,
assignee,
status,
priority,
date
} = this.props;
// Change the date format
date = moment(this.props.date).format('L');
return (
<div>
<div className="icon-list">
<TicketAction icon={<ChevronLeft />} tooltip="Back" />
<TicketAction icon={<ArrowClockwise />} tooltip="Refresh" />
<TicketAction icon={<Archive />} tooltip="Archive" />
<TicketAction icon={<Share />} tooltip="E-mail" />
<TicketAction icon={<Pencil />} tooltip="Edit" />
</div>
<div>
<Card className="card">
<Row>
<Col sm={9}>
<Card.Body>
<div className="header-date text p2">
<p2>2 DAYS AGO ON TUESDAY AT 5.43 AM</p2>
</div>
<Row>
<Col sm={3} className="title">
<h2>{title}</h2>
</Col>
<Col sm={7} className="drop-down">
<PriorityBadge priority="Error" />
</Col>
<Col sm={1}>
<Pencil />
Edit
</Col>
</Row>
<div className="ticket-data-topic text p3">
<p3>Hello,</p3>
<div className="ticket-data-content text p4">
<p4
dangerouslySetInnerHTML={{
__html: description
}}
></p4>
</div>
<hr />
<br />
<Tabs>
<Tab eventKey={1} title="Comments">
<br />
<br />
{this.displayComments()}
<br />
<h3 className="add-comment-heading">Add Comment</h3>
<Row className="comments-section">
<div className="user-avatar-add-comments-section">
<UserIcon name="Shanil Silva" size="40" />
</div>
<Col sm={11}>
<RichTextEditor
editorStyle={'text-editor-view'}
value={this.state.commentText}
buttonText={'Add'}
onChange={this.handleChangeInputs}
onClick={this.handleClick}
/>
</Col>
</Row>
</Tab>
<Tab
eventKey={2}
title="History"
className="nav-item nav-link active"
>
History
</Tab>
</Tabs>
</div>
</Card.Body>
</Col>
<Col sm={1}>
<div className="vl"></div>
</Col>
<Col sm={2} className="ticket-data-item-col">
<Card.Body>
<div className=" ticket-item-title text p4">
<p>Created by</p>
</div>
<h4>John Doe (john#gmail.com)</h4>
<p className="ticket-data-item">{date}</p>
<div className=" ticket-item-title text p4">
<p>Ticket ID</p>
</div>
<h4 className="ticket-data-item">{id}</h4>
<div className=" ticket-item-title text p4">
<p>Employer</p>
</div>
<h4 className="ticket-data-item">{employer}</h4>
<div className=" ticket-item-title text p4">
<p>Assigned to</p>
</div>
<h4 className="ticket-data-item">{assignee}</h4>
<div className=" ticket-item-title text p4">
<p>Status</p>
</div>
<h4 className="ticket-data-item">{status}</h4>
<div className=" ticket-item-title text p4">
<p>Priority</p>
</div>
<div className=" ticket-data-item-badge text p4">
<PriorityBadge priority={priority} />
</div>
<div className=" ticket-item-title text p4">
<p>Last Updated</p>
</div>
<h4>John Doe</h4>
<p>03/05/2020</p>
</Card.Body>
</Col>
</Row>
</Card>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
let {
id,
title,
employerId,
description,
assignee,
ticketStatus,
ticketPriority,
ticketType,
createdTs
} = state.ViewTicketByID.ticketContent.data;
let comments = state.ViewTicketByID.ticketContent.comments;
return {
id: id,
title: title,
employer: employerId,
description: description,
assignee: assignee,
status: ticketStatus,
priority: ticketPriority,
type: ticketType,
date: createdTs,
comments
};
};
const mapDispatchToProps = (dispatch, ownProps) => {
let ticketID = ownProps.match.params.id;
return {
getTicketByID: () => dispatch(getTicketByID(ticketID))
};
};
export default connect(
mapStateToProps,mapDispatchToProps
)(ViewTicket);
TicketActions.js
import * as ActionTypes from '../actionTypes/ticketsActionTypes';
import TicketService from '../ViewTicketService';
export const getTicketByID = (id) => {
return (dispatch) => {
dispatch({ type: ActionTypes.GET_TICKET_BY_ID_IN_PROGRESS });
TicketService.findTicketByID(id)
.then((response)=>
dispatch({
type:ActionTypes.GET_TICKET_BY_ID_COMPLETED,
payload:response
})
)
.catch((error)=>
dispatch({
type:ActionTypes.GET_TICKET_BY_ID_FAILED,
payload: error
})
)
};
};
export const addComments = (commentData) => {
return (dispatch) => {
console.log('Ticket Actions add Comments');
dispatch({ type: ActionTypes.GET_TICKET_BY_ID_IN_PROGRESS });
// TicketService.findTicketByID(id)
// .then((response)=>
// dispatch({
// type:ActionTypes.GET_TICKET_BY_ID_COMPLETED,
// payload:response
// })
// )
// .catch((error)=>
// dispatch({
// type:ActionTypes.GET_TICKET_BY_ID_FAILED,
// payload: error
// })
// )
};
};
I found the issue. You need to pass the function addComments in mapDispatchToProps. e.g.
const mapDispatchToProps = (dispatch, ownProps) => {
let ticketID = ownProps.match.params.id;
return {
getTicketByID: () => dispatch(getTicketByID(ticketID)),
addComments
};
};
im having problems trying to use the onclick function as props it sais when i clicked TypeError: onClick is not a function
What can i do!
7 | <Card
8 | onClick={() => onClick(dish.id)}>
| ^ 9 |
it is my first time using this kind of components
import React from 'react';
import { Card, CardImg, CardImgOverlay,
CardTitle } from 'reactstrap';
function RenderMenuItem ({dish, onClick}) {
return (
<Card
onClick={() => onClick(dish.id)}>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardImgOverlay>
<CardTitle>{dish.name}</CardTitle>
</CardImgOverlay>
</Card>
);
}
const Menu = (props) => {
const menu = props.dishes.map((dish) => {
return (
<div className="col-12 col-md-5 m-1" key={dish.id}>
<RenderMenuItem dish={dish} onClick={props.onClick} />
</div>
);
});
return (
<div className="container">
<div className="row">
{menu}
</div>
</div>
);
}
export default Menu;
Try to have default props to avoid run time errors.
const Menu = (props) => {
const menu = props.dishes.map((dish) => {
return (
<div className="col-12 col-md-5 m-1" key={dish.id}>
<RenderMenuItem dish={dish} onClick={props.onClick} />
</div>
);
});
return (
<div className="container">
<div className="row">{menu}</div>
</div>
);
};
Menu.defaultProps = {
dishes: [],
onClick: () => {},
};
You must now use Menu component by providing valid function. For example <Menu onClick={dishId => {/* Logic /*}}/>
import React, { Component } from "react";
import Product from "./Product";
import Title from "./Title";
import { ProductConsumer } from "../context";
export default class Productlist extends Component {
render() {
return (
<React.Fragment>
<div className="py-5">
<div className="container">
<Title name="our" title="products" />
<div className="row">
<ProductConsumer>
{value => {
return value.products.map(product => {
return <Product key={product.id} product={product} />;
});
}}
</ProductConsumer>
</div>
</div>
</div>
</React.Fragment>
);
}
}
Okay, I am getting this error and I am not quite sure what it is since I am so new to working with React.JS. could someone assist me in figuring out what may be happening.
export default class Product extends Component {
render() {
const { id, title, img, price, inCart } = this.props.product;
return (
<ProductWrapper className="col-9 mx-auto col-md-6 col-lg-3 my-3">
<div className="card">
<div
className="img-container p-5"
onClick={console.log("you clicked me on the image container")}
>
<Link to="/details">
<img src={img} alt="product" className="card-img-top" />
</Link>
</div>
</div>
</ProductWrapper>
);
}
}
const ProductWrapper = styled.div
Above is the Product code as asked! Thank you!