I am trying to render data from <http://www.colr.org/json/color/random>.

I use axios to GET data from API. 
When I receive data, i cannot render it trhough the map (because it is obviously an array inside object) so it throws error: 
TypeError: this.props.colors.map is not a function. 
Do I need to use JSON.parse() or what can I do ?

//App.js

```
import React, { Component } from 'react';
import logo from './logo.svg';
import Color from './components/Color';
import './App.css';
import axios from 'axios';

class App extends Component {
  state = {
    colors: []
  };

componentDidMount() {
  axios.get('http://www.colr.org/json/colors/random/2')
  .then(res => this.setState({
    colors: res.data }))
}

  render() {
    console.log(this.state.colors);
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <Color 
            colors={this.state.colors}
          />
        </header>
      </div>
    );
  }
}
export default App;

```

---

//Color component: 

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

 class Color extends Component {

  render() {
       return this.props.colors.map((color) => (
        <h1
          key={color.id}
        >
          Color{color.id}: {color.hex}
        </h1>
      ))
  }
}

export default Color;

```