Why null is passed in instead of the state?

There is a component.
In ComponentDidMount received data (array of objects), which then writes the state.
When you first render as null and, accordingly, it turns out the error "TypeError: Cannot read property 'map' of null". Which is quite logical. What I don't understand? What should I do to the data obtained attendeelist?
export default class Main extends Component {
 service = new PostServise();
 state = {
 data: null
};

 componentDidMount() {
this.service
.getAllPost()
 .then( (data) => {
console.log(data);
this.setState({
 data: data
});
});
}

 renderPosts(arr) {
 return arr.map(({id, title, text}) => {
 return (
 <section className = 'main__post post'
 key = { id }>
 <a className = 'post__link' href='viewpost.html'>{title}</a>
 <p className = 'post__text'>{text}</p>
</section>
)
});
}

 render() {
 const item = this.renderPosts(this.state.data);
return(
the <div>
{item}
</div>
);
}
};
April 19th 20 at 12:28
3 answers
April 19th 20 at 12:30
Solution
In reacte popular technique
{ this.state.value && ( <>{this.state.value}</> ) }
April 19th 20 at 12:32
I think you have a typo:

service = new PostServise() => service = new PostService()
Thank you. Really a typo, but she went earlier. My problem was not that, but thanks anyway. - emmitt.Hammes70 commented on April 19th 20 at 12:35
@chastity.Hammes70, but not for that) - Elvera.Murray39 commented on April 19th 20 at 12:38
April 19th 20 at 12:34
The problem is that you do not understand the life cycle. ComponentDidMount method is called AFTER the first rendering, you render the pass null, you get this error.
Examine the life cycle and to better understand consolelog insert in the render, componentDidMount, ComponentDidUpdate, componentWillUnmount and see what and when works

Find more questions by tags ReactJavaScript