How to parse a JSON object from an external file in React using .map() in ES6 and a loop?

I am trying to import a JSON object which is in an external file using React, and display its content inside a loop containing HTML. The goal is to display all that into a JQuery Slider (Slick).

I think I succeeded in importing the JSON, but I can't display it. Most of the results I find on the internet are in ES5 also.

Here is my slider.js file:

import React from 'react';
import slidesData from './slides.json';

export class Slider extends React.Component {
    constructor(){
        super();
        this.state = {
            slides: slidesData,
        }
    }

    render() {
        const list = this.state.slides.map(d => <div className="classTest">ID HERE {slidesData.id} - DESCRIPTION HERE {slidesData.desc}</div>);
        return (
            <div className="carousel">
                <div className="data">
                    <div>list before {list} list after</div>
                </div>
            </div>
        );
    }
}

slides.json:

[
    {
        "id": 1,
        "desc": "text desc 1"
    },
    {
        "id": 2,
        "desc": "text desc 2"
    },
    {
        "id": 3,
        "desc": "text desc 3"
    },
    {
        "id": 4,
        "desc": "text desc 4"
    }
]

Result in the browser:

list before
ID HERE - DESCRIPTION HERE
ID HERE - DESCRIPTION HERE
ID HERE - DESCRIPTION HERE
ID HERE - DESCRIPTION HERE
list after

The files are in the same folder. So the {list} is displayed 4 times (like the items it contains) but it doesn't display the content. What am I missing?

And then, I would like to repeat each <div className="data"> with a for loop displaying every time the JSON has content but until I find why the json is not getting displayed properly I don't want to try more complicated code.

Thanks =)