Bonjour à tous,
 
Je sèche sur un projet. Via mon admin, je dois pouvoir modifier des images sur plusieurs pages. Sur ma première page, c'était simple, j'ai pu récupérer mon image via l'id mais sur la seconde (page produits), j'ai potentiellement 16 images modifiables. J'imagine que je dois utiliser un tableau mais je ne parviens pas à trouver la solution.
 
Voici le code de mon composant (j'ai volontairement raccourci le render en ne gardant que 4 "produits" ) :
 
import React, { Component } from 'react';
import './Produits.css';
import Navigation from '../navigation/Navigation';
import Footer from '../footer/Footer';
 
const SERVER_ADDRESS = process.env.REACT_APP_SERVER_ADDRESS;
 
class Product extends Component {
    constructor(props) {
        super();
        this.state = {
             
            imageurl: [],
            data: null
        };
    }
 
    componentDidMount = () => {
        fetch(SERVER_ADDRESS + '/api/images/id')
            .then(response => response.json())
            .then(
                (Product) => {
                    console.log(Product);
                    this.setState({ imageurl: Product.image_name })
                }
            )
    }
 
render() {
        return (
            <div>
            <Navigation />
            <div className="mob-12 tab-12 tabx-12 dsk-12 prod">
                <p className="titre_produits">Produits en vente</p>
                <div className="dsk-10 groupe">
                    <div className="mob-8 tab-5 tabx-2 dsk-2 cadre_produits zoom">
                        {this.state.imageurl !== '' && <img className="image_produits" src={SERVER_ADDRESS + "/pictures/" + this.state.imageurl} alt="" />}
                        <p>Meuble</p>
                    </div>
                    <div className="mob-8 tab-5 tabx-2 dsk-2 cadre_produits zoom">
                        {this.state.imageurl !== '' && <img className="image_produits" src={SERVER_ADDRESS + "/pictures/" + this.state.imageurl} alt="" />}
                        <p>Meuble</p>
                    </div>
                    <div className="mob-8 tab-5 tabx-2 dsk-2 cadre_produits zoom">
                        {this.state.imageurl !== '' && <img className="image_produits" src={SERVER_ADDRESS + "/pictures/" + this.state.imageurl} alt="" />}
                        <p>Meuble</p>
                    </div>
                    <div className="mob-8 tab-5 tabx-2 dsk-2 cadre_produits zoom">
                        {this.state.imageurl !== '' && <img className="image_produits" src={SERVER_ADDRESS + "/pictures/" + this.state.imageurl} alt="" />}
                        <p>Meuble</p>
                    </div>
                </div>                
            <Footer />
        </div>
        );
    }
}
 
export default Product;

J'ai finalement trouvé une solution. Je poste ça dès que possible pour ceux que cela pourrait intéresser.