title: How to load a specific photo with dynamic URL with react.js
body: <p>I have a component where a list of pictures is rendered and it works perfectly fine :</p>
  <pre><code>import { Component} from 'react'
  
  import Header from '../Home/Header'
  import Footer from '../Home/Footer'
  
  import PhotoItems from './objet'
  
  class Photos1930 extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Header /&gt;
   &lt;h2 className='titre bloc'&gt;Photos 1930&lt;/h2&gt;
          &lt;div className='bloc bloc__photo'&gt;
            {PhotoItems.map((val, key) =&gt; {
              let id = val.id
              let url = val.url
              let lienImage = &quot;/galerie/:&quot; + (val.id)
              return &lt;div key={id}&gt;
                &lt;a href={lienImage}&gt;
                &lt;img className='photo' alt='Photo Charles-Quint' src={url}&gt;&lt;/img&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            })}
          &lt;/div&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
    
      )
    }
    }
     
  
  export default Photos1930
  </code></pre>
  <p>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.</p>
  <pre><code>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 (
        &lt;div&gt;
        &lt;Header /&gt;
        &lt;div&gt;
        &lt;h1&gt;{justId}&lt;/h1&gt;
          &lt;img className=&quot;bigPhoto&quot; alt=&quot;Charles-Quint&quot; src={justUrl}&gt;&lt;/img&gt;
        &lt;/div&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
  
      )
    }
  }
  
  
  export default PickPhoto
  </code></pre>
  <p>EDIT1 : Here's my github repo : <a href="https://github.com/FranMori/CharlesQuint" rel="nofollow noreferrer">https://github.com/FranMori/CharlesQuint</a>
  and here's my netlify link : <a href="https://stoic-bohr-810e13.netlify.app/" rel="nofollow noreferrer">https://stoic-bohr-810e13.netlify.app/</a>
  You can click on &quot;Galerie Photos&quot; and then click on any picture to see the problem.</p>