Reputation: 1
The following code produces: List of artists
The first JS file artists.js I map() through an array of objects from useState() hook which produces the list of artists, but now how can I create an onClick that will only show the details of the selected artist? when I do a console.log() I get the data of the artist that I clicked on but further more I can't seem to display that on the details.js page that the onClick is linked to. Please can someone help.
(artists.js)
import React, { useContext } from "react";
import { Link } from "../components/Router";
import { ArtistContext } from "../ArtistContext";
const Artists = () => {
const [artists, setArtists] = useContext(ArtistContext);
return (
<div className="container-fluid">
<div className="row mt-5">
{artists.map(artist => (
<div className="col-10 col-lg-4 mx-auto mt-5 mb-5" key={artist.id}>
<div className="card" style={{ width: "18rem" }}>
<img
src={artist.img}
alt={artist.headerTitle}
style={{ width: "100%", height: "250px" }}
className="card-img-top"
/>
<div className="card-body">
<h3 className="card-title text-uppercase">
{artist.headerTitle}
</h3>
<h5 className="card-title">{artist.headerSubTitle}</h5>
<p className="card-text">{artist.headerText}</p>
<Link
to="/details"
className="btn btn-outline-primary text-uppercase"
onClick={() => console.log(artist)}
>
Gallery
</Link>
</div>
</div>
</div>
))}
</div>
</div>
);
};
export default Artists;
(details.js)
import React, { useContext } from "react";
import { ArtistContext } from "../ArtistContext";
const Details = props => {
const [artists, setArtists] = useContext(ArtistContext);
return <div className="container-fluid">{artist.title}</div>;
};
export default Details;
Upvotes: 0
Views: 1110
Reputation: 1704
As you are using <Link/>
to mount the details, you can pass the artist's id in the route and access the artist by matching the id from useContext
in details.js
In artists.js
<Link
to={"/details/" + artist.id}
className="btn btn-outline-primary text-uppercase"
onClick={() => console.log(artist)}
>
Based on the router you use, I can answer how to receive params in the child (details.js).
Upvotes: 1