React.js loading data from server

Question

I am trying to take data from server and use it. But I get error like this - "Cannot read property 'map' of undefined". As how I understand it is not taking data from server. And also when I am trying to check for data with console.log() nothing is showing in console. And even from other components console.log() except app.js is not working. I just can't find the problem.... I have this code in react.js :

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

    class ProductListContainer extends Component {
    constructor(props){
        super(props);
        this.state = { products : []};
        console.log ('ProductListContainer constructor');
    }

    componentWillMount (){
        var self = this;
        axios.get('https://itpro2017.herokuapp.com/api/products')
        .then ((result) => {
            self.setState({products:result.data});
            console.log(result + ' data');    
        })
        .catch ((error) => {
            console.log(error);
        })

    }

render()
{
    return <ProductListContainer products={this.state.products}/>
}
};

      import  React from 'react';
      import ProductCardComponent from 
     '../ProductCardComponent/ProductCardComponent';
       import ProductListContainer from 
      'C:/Users/DoNata/Desktop/JavaTechnologijos/new-shop/src/container/';
      import './ProductListComponent.css';


    var ProductListComponent = function(props) {
     var productCards = props.products.map((product, index) => {
      return (
         <ProductCardComponent
         key={index}
         id={product.id}
        image={product.image}
        title={product.title}
        description={product.description}
        price={product.price}
         />
        );
      });
       return (
      <div className="row">
        {productCards}</div>
       );
    };

     export default ProductListComponent;

Answer 1

I believe there are a couple of issues. But mainly, you need to return the ProductListComponent , not the ProductListContainer in the first render method (currently you're recursively nesting ProductListContainer and then never actually using it). Therefore, you should be importing ProductListComponent from within ProductListContainer , not the other way around. And as a fail safe, wrap the map function in an if statement checking that props.products actually has content.

I would also consider renaming some of these components because it's hard to read, but that's not my business.

edit: I believe that if your code looks something like this, it should work. You will have to adjust the import statement at the top of the ProductListContainer file to point to the correct file:

Container Element

import  React, { Component } from 'react';
import axios from 'axios';
import ProductListComponent from './wherever/this/is/located'

class ProductListContainer extends Component {
  constructor (props) {
    super(props);
    this.state = { products : []};
    console.log ('ProductListContainer constructor');
  }

  componentWillMount () {
    var self = this;
    axios.get('https://itpro2017.herokuapp.com/api/products')
      .then ((result) => {
        self.setState({products:result.data});
        console.log(result + ' data');  
      })
      .catch ((error) => {
        console.log(error);
      })
  }

  render () {
    return <ProductListComponent products={this.state.products} />
  }
};

Component Element

import  React from 'react';
import ProductCardComponent from 
'../ProductCardComponent/ProductCardComponent';
import './ProductListComponent.css';


var ProductListComponent = function(props) {
  var productCards
  // check that props.products has anything in it
  if (props.products.length) {
    productCards = props.products.map((product, index) => {
      return (
        <ProductCardComponent
          key={index}
          id={product.id}
          image={product.image}
          title={product.title}
          description={product.description}
          price={product.price} />
      );
    });
  } else { // otherwise, just return an empty div until the server response
           // comes back
    productCards = <div />
  }

  return (
    <div className="row">
      {productCards}
    </div>
  );
};

export default ProductListComponent;