How to load a specific photo with dynamic URL with react.js-CodePudding

I have a component where a list of pictures is rendered and it works perfectly fine :

import { Component} from 'react'

import Header from '../Home/Header'
import Footer from '../Home/Footer'

import PhotoItems from './objet'

class Photos1930 extends Component {
  render() {
    return (
      <div>
        <Header />
 <h2 className='titre bloc'>Photos 1930</h2>
        <div className='bloc bloc__photo'>
          {PhotoItems.map((val, key) => {
            let id = val.id
            let url = val.url
            let lienImage = "/galerie/:"   (val.id)
            return <div key={id}>
              <a href={lienImage}>
              <img className='photo' alt='Photo Charles-Quint' src={url}></img>
              </a>
            </div>
          })}
        </div>
        <Footer />
      </div>
  
    )
  }
  }
   

export default Photos1930

I want to create an other component where i can load a specific picture when user click on a picture from the precedent list. I use the same logic but for some reason the picture doesn't load. I don't have any errors in my console but on my page i just have the standard icon for image with my alt. All the pictures are on public folder. I just don't understand why is it working on one component but not on the other one.

import { Component } from 'react'

import Header from '../Home/Header'
import Footer from '../Home/Footer'

import PhotoItems from './objet'

const url = window.location.pathname
const justId = parseInt((url.split(':')[1]))

function specificId(photo) {
  return photo.id === (justId)
}

let justUrl = (PhotoItems.find(specificId).url)
console.log(justUrl)

class PickPhoto extends Component {
  render() {
    return (
      <div>
      <Header />
      <div>
      <h1>{justId}</h1>
        <img className="bigPhoto" alt="Charles-Quint" src={justUrl}></img>
      </div>
      <Footer />
    </div>

    )
  }
}


export default PickPhoto

EDIT1 : Here's my github repo : https://github.com/FranMori/CharlesQuint and here's my netlify link : https://stoic-bohr-810e13.netlify.app/ You can click on "Galerie Photos" and then click on any picture to see the problem.

CodePudding user response：

in your repo, this.justUrl is undefined. You need to add justUrl in the component's state and update it dynamically inside componentDidMount like so. I also added a / in src={/${this.state.justUrl}}

import { Component } from 'react'

import Header from '../Home/Header'
import Footer from '../Home/Footer'

import PhotoItems from './objet'



class PickPhoto extends Component {
  constructor() {
    super()
    this.state = { justUrl: "" };
  }
  componentDidMount() {
    const url = window.location.pathname
    const justId = parseInt((url.split(':')[1]))

    function specificId(photo) {
      return photo.id === justId
    }
    let justUrl = (PhotoItems.find(specificId).url)
    console.log(justUrl)
    this.setState({justUrl})
  }
  render() {
    return (
      <div>
      <Header />
      <div>
      <h1>{this.justId}</h1>
        <img className="bigPhoto" alt="Charles-Quint" src={`/${this.state.justUrl}`}></img>
      </div>
      <Footer />
    </div>

    )
  }
}


export default PickPhoto