mapを使用すると[TypeError ※※.map is not a function]と表示される

Question

前提・実現したいこと

fechを用いて取得したデータをセレクトボックスで表示したいです。
DoglistContainer.jsで取得したapiをApp.jsで表示したいです。

発生している問題・エラーメッセージ

TypeError
breeds.map is not a function

該当のソースコード

App.js

import * as React from 'react'
import './App.css'
import Description from './Description'
import DogListCintainer from './DogListContainer'
import Header from './Header'


export const App = () => {

  return (  
    <div>
      < Header title="dogアプリ" />
      <DogListCintainer />
      <div className="container">
        <Description text= "犬の画像を表示させています。"/>
      </div>
    </div>
  )
}

DogListContainer

import { useEffect, useState } from "react";
import React from "react";

export function DogListCintainer() {
  const [breeds, setBreeds] = useState("shiba")
  const url = "https://dog.ceo/api/breeds/list/all"
  useEffect(() => {
    fetch(url)
    .then(res => res.json())
    .then(
      (result) =>{
        const dog = result.message
        console.log(dog)
        setBreeds(result.message)
      })
  }, [])

    const dogList = breeds.map((value) => {
      <option> {value}</option>
    })

  return (
    <div>
        <select>
         {dogList}
        </select>
    </div>
  )
}
export default DogListCintainer;

取得したAPI

{
    "message": {
        "affenpinscher": [],
        "african": [],
        "airedale": [],
        "akita": [],
        "appenzeller": [],
        "australian": [
            "shepherd"
        ],
        "basenji": [],
        "beagle": [],
        "bluetick": [],
        "borzoi": [],
        "bouvier": [],
        "boxer": [],
        "brabancon": [],
        "briard": [],
        "buhund": [
            "norwegian"
        ],
        "bulldog": [
            "boston",
            "english",
            "french"
        ],
        "bullterrier": [
            "staffordshire"
        ],
        "cattledog": [
            "australian"
        ],
        "chihuahua": [],
        "chow": [],
        "clumber": [],
        "cockapoo": [],
        "collie": [
            "border"
        ],
        "coonhound": [],
        "corgi": [
            "cardigan"
        ],
        "cotondetulear": [],
        "dachshund": [],
        "dalmatian": [],
        "dane": [
            "great"
        ],
        "deerhound": [
            "scottish"
        ],
        "dhole": [],
        "dingo": [],
        "doberman": [],
        "elkhound": [
            "norwegian"
        ],
        "entlebucher": [],
        "eskimo": [],
        "finnish": [
            "lapphund"
        ],
        "frise": [
            "bichon"
        ],
        "germanshepherd": [],
        "greyhound": [
            "italian"
        ],
        "groenendael": [],
        "havanese": [],
        "hound": [
            "afghan",
            "basset",
            "blood",
            "english",
            "ibizan",
            "plott",
            "walker"
        ],
        "husky": [],
        "keeshond": [],
        "kelpie": [],
        "komondor": [],
        "kuvasz": [],
        "labradoodle": [],
        "labrador": [],
        "leonberg": [],
        "lhasa": [],
        "malamute": [],
        "malinois": [],
        "maltese": [],
        "mastiff": [
            "bull",
            "english",
            "tibetan"
        ],
        "mexicanhairless": [],
        "mix": [],
        "mountain": [
            "bernese",
            "swiss"
        ],
        "newfoundland": [],
        "otterhound": [],
        "ovcharka": [
            "caucasian"
        ],
        "papillon": [],
        "pekinese": [],
        "pembroke": [],
        "pinscher": [
            "miniature"
        ],
        "pitbull": [],
        "pointer": [
            "german",
            "germanlonghair"
        ],
        "pomeranian": [],
        "poodle": [
            "miniature",
            "standard",
            "toy"
        ],
        "pug": [],
        "puggle": [],
        "pyrenees": [],
        "redbone": [],
        "retriever": [
            "chesapeake",
            "curly",
            "flatcoated",
            "golden"
        ],
        "ridgeback": [
            "rhodesian"
        ],
        "rottweiler": [],
        "saluki": [],
        "samoyed": [],
        "schipperke": [],
        "schnauzer": [
            "giant",
            "miniature"
        ],
        "setter": [
            "english",
            "gordon",
            "irish"
        ],
        "sheepdog": [
            "english",
            "shetland"
        ],
        "shiba": [],
        "shihtzu": [],
        "spaniel": [
            "blenheim",
            "brittany",
            "cocker",
            "irish",
            "japanese",
            "sussex",
            "welsh"
        ],
        "springer": [
            "english"
        ],
        "stbernard": [],
        "terrier": [
            "american",
            "australian",
            "bedlington",
            "border",
            "cairn",
            "dandie",
            "fox",
            "irish",
            "kerryblue",
            "lakeland",
            "norfolk",
            "norwich",
            "patterdale",
            "russell",
            "scottish",
            "sealyham",
            "silky",
            "tibetan",
            "toy",
            "welsh",
            "westhighland",
            "wheaten",
            "yorkshire"
        ],
        "tervuren": [],
        "vizsla": [],
        "waterdog": [
            "spanish"
        ],
        "weimaraner": [],
        "whippet": [],
        "wolfhound": [
            "irish"
        ]
    },
    "status": "success"
}

試したこと

・取得したAPIが配列ではないためmapを使用できないと考えました。そこでeachに変えてみましたがエラーは治りませんでした。

・fechで取得したデータをオブジェクトから配列に変換してからmapで表示しようとしましたが、keyが必要だっため、難しいと判断しました。

・取得した値を配列で保存使用しましたが[message.result]結果は変わりませんでした。

Answer 1

const dogList = Object.keys(data.message).map((value) => {
        return <option key={value}>{value}</option>
       })

Object.keysを使用してAPIから取り出したデータを配列に変換することで解決できました。

Answer 2

えっと、どのような結果を想定していたのですか？

const [breeds, setBreeds] = useState("shiba")と、この変数に入れているものは文字列1つです。文法的なエラーもそうですが、もともと何がしたかったのかの意図も、コードから読み取れません。

Comments

[kaji120]

ご回答ありがとうございます。
取得したAPIをセレクトボックスで一覧として表示させたかったです。