Какие способы правильно загрузить данные в react компонент?

import React from 'react'
import { render } from 'react-dom'
import axios from 'axios'
import "bootstrap/scss/bootstrap.scss"



class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {data:null} // неработает ошибка, нету 0 индекса
        // this.state = {data:[{title:"placeholder title"}]} // работает с такой болванкой, данные ререндятся после фетча данных
        this.loadData()
    }

    loadData(){
        axios.get('https://jsonplaceholder.typicode.com/posts')
            .then(res=>{
                console.log("axios res data: ",res.data);
                this.setState({data:res.data})
            })
    }
    render() {
        return (
            <div>
            <h4>App component</h4>
            {this.state.data[0].title}
            </div>
        )
    }
}

render( 
    <div className = "container">
        <App/>
    </div>,
    document.getElementById("root")
)