Stateless functional component updates while stateful version does not - reactjs

Question

I get data from and API async and, I thought, solved the related timing issues here, but I still have issues with the render not updating.
Since my component would not update I broke it down to a basic stateless version and then it started working. I've tried to make identical versions of the components, +/- state. Only the stateless version works as I said, but I need the full component to work so I can do stuff with the state. Otherwise I'd use it as is, stateless.
(Side note: Not sure if this is 'React-ful', but I use only props in the example in the full React.Component, never setting anything to state. Moving on...)
Full version component - unworking fiddle
class Posts extends React.Component {
constructor(props) {
super(props)
this.state = {};
this.posts = props.data;
}
render() {
return this.posts.map((post, index) => {
return (
<div className="comment" key={index}>
<div className="by">{post.by}</div>
<div className="id">{post.id}</div>
</div>
)
})
}
}
stateless functional - working fiddle
function Posts(props) {
let posts = props.data;
return posts.map((post, index) => {
return (
<div className="comment" key={index}>
<div className="by">{post.by}</div>
<div className="id"> {post.id}</div>
</div>
)
})
}
For some reason the full component does not re-render on click while the stateless does. I thought I resolved the timing issues but perhaps not? Is the component type truly causing the thing to break/work? Why?
I tried to make the only difference btw the fiddles the way Posts is structured, still the fiddles are quite busy. Hopefully though more effective in showing my problem than showing the code here.

Answer 1

Cause component will re-render when props or state update. In your state full component constructor only invoke once. So this.post not updated. You can fix that in 2 way
Change this.posts when props component will change
componentWillReceiveProps (nextProps) {
this.posts = nextProps.posts
}
Or use directly props.post in render (this better)
return this.props.posts.map((post, index) => {...})

Answer 2

class Posts extends React.Component {
constructor(props) {
super(props)
this.state = {};
}
render() {
return this.props.data.map((post, index) => {
return (
<div className="comment" key={index}>
<div className="by">{post.by}</div>
<div className="id">{post.id}</div>
</div>
)
})
}
}
First of all try something like this instead of initializing the posts in constructor. In your case it might me trying to render before initializing this.posts