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

Question

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.

Have you tried to move all url, justId, specificId and justUrl inside the component? — Peter
– Peter, Commented Mar 20, 2022 at 10:05
Yes @Peter, that was my first choice. But sadly it doesn't work either — Dazak
– Dazak, Commented Mar 20, 2022 at 10:10

Peter · Accepted Answer · 2022-03-23 14:53:28Z

in your repo, this.justUrl is undefined. You need to add justUrl in the component's state and update it dynamically inside componentDidMount like below. 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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related