Map d'un objet json

Bonjour à tous,

Dans mon appli REACT, je rencontre des difficultés pour extraire des données de mon objet json avec la méthode map(). Suite à un fetch j'obtiens ce type de données.

Un grand merci à ceux qui prendront

[
{
"material": [
{
"1": "Câble VGA",
"2": "Câble HDMI",
"4": "Machine à café",
"6": "Markers"
}
],
"name": "Acheneau",
"url_picture": "/rooms/salle10.jpg",
"adress": "1 Esplanade de la Gare, 49100 Angers"
}
]

Pas de soucis pour accéder aux données name, url-picture ou adress mais je ne parviens pas à lister les données du tableau d'objet "material" dans mon code

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLocationDot } from "@fortawesome/free-solid-svg-icons";
import { NavLink } from "react-router-dom";
const baseUrl = import.meta.env.VITE_BACKEND_URL;

function RoomDetails() {
  const navigate = useNavigate();

  const [detailState, setDetailState] = useState([]);

  useEffect(() => {
    async function fetchData() {
      await fetch(`${baseUrl}/room_material/2`)
        .then((response) => {
          return response.json();
        })
        .then((jsonData) => {
          setDetailState(jsonData);
        })
        .catch(() => {
          navigate("/erreur");
        });
    }
    // setIsLoading(true);
    fetchData();
    /* setIsLoading(false);   */
  }, [navigate]);

  console.log("je suis le fetch ?", detailState);

  return (
    <div>
      {detailState.map((elem) => (
        <div className="sm:flex justify-around">
          <NavLink to="/">
            <div className="absolute right-6 text-4xl text-blueBlack-100 Ouline-black">
              X
            </div>
          </NavLink>
          <div className="sm:flex-col">
            {/* mettre la ligne du haut en flex */}
            <div key={elem.id}>
              <img
                className="h-[23rem] w-full object-cover"
                src={`${baseUrl}${elem.url_picture}`}
                alt={elem.name}
              />
            </div>
            <div className="flex bg-gray-300 h-[4rem] mb-7 text-dark-100 items-center font-normal ">
              <h3 className="ml-5 mr-5 text-[1.7rem]">{elem.name}</h3>
              <h3 className="text-[1.2rem] truncate">{elem.adress}</h3>
            </div>
          </div>
          <div className="flex justify-around mb-6 sm:flex-col">
            <div className="">
              <div className="flex items-center ml-5">
                <FontAwesomeIcon icon={faLocationDot} />
                <h3 className="ml-2 text-[1.2rem]">Plan d'accès</h3>
              </div>
              <div className="bg-orange-200 h-[7rem] w-[10rem] rounded-xl text-center sm:h-[7rem] sm:w-[25rem]"></div>
            </div>
            <div>
              <div>
                <h3 className="ml-2 text-[1.2rem]">Équipement de la salle</h3>
[#red]?     JE VOUDRAIS LISTER DANS LA LISTE CI-DESSOUS MA LISTE DE MATERIAL
                {/* <ul className="text-center">
                  {elem.material.map((value) => (
                    <li keys={value}>{value}</li>
                  ))}
                </ul>*/}[/#]
              </div>
            </div>
          </div>
        </div>
      ))}
      <div className=" flex justify-center">
        <button
          type="button"
          className="bg-blueDuck-100  px-4 py-2 mb-6 rounded-lg text-whiteSimple-100 "
        >
          Réserver
        </button>
      </div>
    </div>
  );
}

export default RoomDetails;

Modifié par Drada (26 Feb 2023 - 10:41)