why render function not call in react?

Question

I am trying to show my list in react using component .But it not display .I do like this

https://codesandbox.io/s/lYMwLM591

import { Component } from 'react';

class ImageSlider extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (<div>{this.props.data.hl}</div>);
  }
}

export default ImageSlider;

another components

 renderStories() {
    if (this.props.stories && this.props.stories.items > 0) {
      return this.props.stories.items.map(story => {
        return <ImageSlider data={story}/>;
      });
    }
  }
  render() {
    return (
      <div>
        lll
        {this.renderStories()}
      </div>
    );
  }
}

Answer 1

The problem is pretty simple, you need to check the length of items array

if (this.props.stories && this.props.stories.items.length > 0) {
  return this.props.stories.items.map(story => {
    return <ImageSlider data={story}/>;
  });
}

And import React in ImageSlider component

import React, {Component} from 'react';

See this answer: Need help on React Js

DEMO

Answer 2

Change:

renderStories() {
  if (this.props.stories && this.props.stories.items > 0) {
    return this.props.stories.items.map(story => {
      return <ImageSlider data={story}/>;
    });
  }
}

to:

renderStories() {
  if (this.props.stories && this.props.stories.items && this.props.stories.items.length > 0) {
    return this.props.stories.items.map(story => {
      return <ImageSlider data={story}/>;
    });
  }
}

should make it works.

Also in /components/image.slider.js, you should import React, otherwise, an error like React is not defined will display.

import React, { Component } from 'react';

Answer 3

You also have to do this

import React, { Component } from 'react;