Click to item details page not showing anything in React & ID undefined-CodePudding

Probably a very easy one for a seasoned React dev but basically I’m getting data from a JSON Object to display the on a “Releases” page. When a user clicks, just wanted to show the details of that release ID but I can’t seem to get anything to show. Just want to show the image. description and title for each release. Thanks.

Code from App.js

  const App = () => {
  
return (
    <Navbar />
      <div className="container">
        <Router>
          <Routes>
            <Route path='/' element={<About />} />
            <Route path='/about' element={<About />} />
            <Route path='/artists' element={<Artists />} />
            <Route path='/contact' element={<Contact />} />
            <Route path='/releases' element={<Releases />} />
            <Route path='/release/*' element={<SingleRelease />} />
            <Route path='/artist/*' element={<SingleArtist />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Router>
      </div>

  );
}


export default App

code from Releases.js

  const Release = () => {

  return (
    <Wrapper>
      <div className="release">
        {releases.map((release, i) => (
          <div className="item" key={i}>
            <div className="title"> {release.title}</div>
            <Link to={`/release/${release.id}`}>
              <img className="image " src={release.imageURL} alt={release.name} />
            </Link>
          </div>
        ))}
      </div>
    </Wrapper>
  )
}

    const Wrapper = styled.div`
      .release {
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
        flex-wrap: wrap;
      }
      .image {
        max-width: 100%;
        height: auto;
    }
    `
    
    export default Release

code from SingleRelease.js

import React from 'react'
import { useParams } from 'react-router-dom';
import Release from '../components/Release';
import releases from "../data/releases.json";

function SingleRelease(props) {

  const { id } = useParams()
  console.log(id)


  return (
    <>
      <div>Single Release {id}</div>

    </>
  )
}

export default SingleRelease

code from Releases.json (Sample block)

[
  {
    "id": 0,
    "imageURL": "./images/cloudbursts.jpg",
    "title": "Cloud Bursts",
    "artist": "Eric Shans",
    "description": "Mexico City based artist Eisenheim is back on 3Bridge with a killer EP called 'Archetypes'. It features 2 original tracks with remixes by Primordial Om and Anduaga.",
    "buy": "https://www.beatport.com/release/ardour/3096956",
    "stream": "https://open.spotify.com/album/5vNYmx4uNY5fIPrOCR0cUa?si=lwCXwLGtSn6g6ZNToPZKRQ"
  },
  {
    "id": 1,
    "imageURL": "/images/archtypes.jpg",
    "title": "Archetypes",
    "description": "Mexico City based artist Eisenheim is back on 3Bridge with a killer EP called 'Archetypes'. It features 2 original tracks with remixes by Primordial Om and Anduaga.",
    "artist": "Eric Shans",
    "buy": "https://www.beatport.com/release/we-choose/1916121"
  },
]

CodePudding user response：

If what you're trying to do is to show the details of that release id, if you have an api, fetch based on the id, but you have a json array ready you just use array.find.

Example

const releases = [
  {
    id: 0,
    imageURL: "./images/cloudbursts.jpg",
    title: "Cloud Bursts",
    artist: "Eric Shans",
    description:
      "Mexico City based artist Eisenheim is back on 3Bridge with a killer EP called 'Archetypes'. It features 2 original tracks with remixes by Primordial Om and Anduaga.",
    buy: "https://www.beatport.com/release/ardour/3096956",
    stream:
      "https://open.spotify.com/album/5vNYmx4uNY5fIPrOCR0cUa?si=lwCXwLGtSn6g6ZNToPZKRQ"
  },
  {
    id: 1,
    imageURL: "/images/archtypes.jpg",
    title: "Archetypes",
    description:
      "Mexico City based artist Eisenheim is back on 3Bridge with a killer EP called 'Archetypes'. It features 2 original tracks with remixes by Primordial Om and Anduaga.",
    artist: "Eric Shans",
    buy: "https://www.beatport.com/release/we-choose/1916121"
  }
];

const Demo = (props) => {
  const id = 0;
  const release = releases.find((r) => r.id === id);

  return <div>{release ? JSON.stringify(release) : "Not found"}</div>;
};

This should show you the object, you can then render whatever you want based on the result in release

Issue #2

r.id === id compares r.id of type number to id of type string, which will result false due to the ===. To fix this, you can do const release = releases.find((r) => r.id === id); and that will match perfectly