ReactJS mapping to API

Question

import React, { Component } from 'react';
import axios from 'axios';

class Meetups extends Component {

  constructor(props) {
    super(props);
    console.log('in constructor');
    this.state = {
      results: [],
    };
  }

 componentDidMount() {
  console.log('meetup feed');
   axios.get('https://api.meetup.com/2/categories?offset=0&format=json&photo-host=public&page=20&order=shortname&desc=false&sig_id=211627025&sig=ae69aec13f23c7837cd55c5a68b99e00719fa225')
  //response
  .then(response => response.json())
  .then(data => this.setState({results:data.results}));
 }
  render() {
    const {results} =this.state;
    return(
      <div>
      {results.map(result =>
        <div key={result.id} className='container'>
            {result.name}
        </div>
      )}
    </div>
     );
    }
}

export default Meetups;

JSON format which I'm receiving:

{
    "results": [
        {
            "name": "Arts & Culture",
            "sort_name": "Arts & Culture",
            "id": 1,
            "shortname": "Arts"
        },
        {
            "name": "Book Clubs",
            "sort_name": "Book Clubs",
            "id": 18,
            "shortname": "Book Clubs"
        },
        {
            "name": "Career & Business",
            "sort_name": "Career & Business",
            "id": 2,
            "shortname": "Business"
        }
]
}

I am trying to use Meetup API in my project. But could not able to connect with it. There might be a problem with mapping. I want to know exact mapping for the given json format. Please help me out. Thanks

Answer 1

import React, { Component } from 'react';
import axios from 'axios';

class Meetups extends Component {

  state = {
    results: []
}
componentDidMount() {
    axios.get('https://api.meetup.com/2/categories?offset=0&format=json&photo-host=public&page=20&order=shortname&desc=false&sig_id=211627025&sig=ae69aec13f23c7837cd55c5a68b99e00719fa225')
        .then(response => {
            let results = response.data.results;
            this.setState({ results: results });
            console.log(response);
        })

}
render() {
    let studentsDisplay = (
        this.state.results.map( (result, index) =>  
        <div  key={index} className="card" style= { {width: '18rem'} }>
            {result.name}
            <br/>
            {result.shortname}
        </div>

    ));
    return (
        <div className='container'>
            {
                studentsDisplay     
            }
        </div>
    );
}
}

export default Meetups;