Why is null passed instead of state?

Question

JavaScript

There is a component.
In ComponentDidMount we get data (an array of objects), which we then write to state.
On the first render, the state is null and, accordingly, the error "TypeError: Cannot read property 'map' of null" is thrown. Which is quite logical. What? I do not understand? What should I do to render the received data?

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(
      <div>
        {item}
      </div>
    );
  }
};

Answer 1

In React, a popular technique is

{ this.state.value && ( <>{this.state.value}</> ) }

Answer 2

I think you mistyped:

service = new PostServise() => service = new PostService()

Answer 3

The problem is that you don't understand the life cycle well. The componentDidMount method is called AFTER the first render, and you pass null in the render, which is why you get this error.
Study the life cycle and for a better understanding paste the consolelog into render , componentDidMount , ComponentDidUpdate , componentWillUnmount and see what and when it fires