Estoy siguiendo el código: https://codesandbox.io/s/cranky-leaf-2hupv?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js

El ejemplo funciona en mi proyecto React pero cuando trato de adaptarlo a los valores de mi base de datos, aparece el error:

No capturado (en promesa) TypeError: response.data.map no es una función

Mi JSON es simple

 categories: 0: Id: "22" Name: "Strategy" 1: Id: "19" Name: "Sports" 2: Id: "27" Name: "Branding"

He adaptado el código para que se ajuste a mi JSON de la siguiente manera:

 import React, { Component } from 'react'; import axios from 'axios'; export default class TestDropdown extends React.Component { constructor(props) { super(props); this.toggle = this.toggle.bind(this); this.state = { display: "", titles: [], errorMsg: '' }; } toggle() { this.setState(prevState => ({ dropdownOpen: !prevState.dropdownOpen })); } componentDidMount = (e) => { axios.get("https://mysite/devapi/categories.php").then((response) => this.setState({ titles: response.data.map(({ Name }) => Name), /*error*/ display: response.data[Math.floor(Math.random() * response.data.length)].title }) ); }; render() { const { display, titles } = this.state; return ( <div className="container"> <select defaultValue={display}> {titles.map((Name) => ( <option key={Name} value={Name}> {Name} </option> ))} </select> </div> ); } }

He considerado si estoy cometiendo un error al leer el valor JSON incorrecto al no acceder a 'categorías' o si esto tiene algo que ver con el mapa/lista. Solo necesitaría los valores de Nombre para completar la Opción.

Gracias amables de un principiante.