Why null is passed in instead of the state?

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>
);
}
};