Estoy realizando un get a un Json server
adjunto servidor json
http://my-json-server.typicode.com/jee4nc/myjsonserver/lista
EL problema esta cuando quiero asignarle esa lista de objetos a otro componente mediante props
import React, { Component } from 'react';
import axios from 'axios';
import CardsGrid from "../Pages/CardsGrid"
class Axios_cards extends Component {
constructor(props) {
super(props)
this.state = {
courses : []
}
}
componentDidMount() {
axios.get('http://my-json-server.typicode.com/jee4nc/myjsonserver/lista')
.then(response => this.setState({
courses: response.data
}))
}
render() {
const {courses} = this.state
return <CardsGrid courses={courses}/
}
}
export default Axios_cards;
Exactamento lo asigno aqui
render() {
const {courses} = this.state
return <CardsGrid courses={courses}/>
}
El componente que recibe la lista de objetos como props no recibe el array, ya que hice una validación para verificarlo
**Adjunto el componente al que asigno el array a través de props *
const CardsGrid = ({courses}) => (
<div className="ed-grid m-grid-3">
{
Array.isArray(courses) ?
courses.map( e =>
<Cards
id={e.id}
title={e.title}
description={e.description}
image={e.image}
price={e.price}
key={e.id}
/>) : null
}
</div>
)
Al aplicar console.log(courses) , me sale "undefined", por lo que el array que pido con axios.get no se aplico como propiedad Estoy aprendiendo por mi cuenta javascript y reactjs por lo cual, el error pueda que sea muy obvio o algo muy pequeño :(