react hooks - how to display one image of an array

Question

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;

Chaitanya Mankala · Accepted Answer · 2020-03-12 11:47:40Z

1

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).

answered Mar 12, 2020 at 11:47

Chaitanya Mankala

1,73418 silver badges24 bronze badges

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

3 Comments

Duane Muller Over a year ago

Yes I'm using <Link> from react-router, to mount to the details page

Chaitanya Mankala Over a year ago

Refer this article to use URL Params using react router, tylermcginnis.com/react-router-url-parameters

Chaitanya Mankala Over a year ago

Please upvote and approve, if you find my answer helpful :)

Collectives™ on Stack Overflow

react hooks - how to display one image of an array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related