React component mounting before receiving appropriate state

Question

I need to receive some data from a get request and then send it as props to another component.

However it seems to be trying to render the other component before receiving the state I need. Here is the current code:

class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            logList:[],

        };

    }

    componentWillMount(){
        var me=this;
        var logDirs, currentDirectory;
        const request = axios.get(baseUrl+"/logs")
            .then(function(response){
                logDirs = response.data.logdirs;
                currentDirectory = logDirs[me.props.directory];
                axios.get(currentDirectory.name)
                    .then(function(response){
                        me.setState({
                            logList: response.data.logs
                        });

                    });

        });

    }

    renderLogDirectories(){
        if (this.state.logList.length>0){
            return (<LogDirectories logs={this.state.logList}/>);
        }
    }

    render(){
        if(this.state.logList.length>0)
            return (
                <div>
                            {this.renderLogDirectories()}
                </div>
            );

    }
}

Here is the component that needs to receive the props:

class LogList extends Component{

    render(){
        var me = this;

        return (
            <ListGroup>
                <ListGroupItem
                    bsStyle="success">{this.props.directory}</ListGroupItem>
                    {(this.props.logs).map(function (logList, key) {
                        return (
                            <Link><ListGroupItem key={key}>
                                {logList}
                            </ListGroupItem></Link>);
                    })}
            </ListGroup>
        );
    }
}

So, what changes can I make to get this to work?

As it is right now, the errors I am getting are:

Uncaught Invariant Violation: App.render(): A valid React element (or null) must be returned.

Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null (...)

Answer 1

You need to return a valid element, like the error says, if nothing is loaded.

render(){
    if(this.state.logList.length>0) {
        return (
            <div>
                {this.renderLogDirectories()}
            </div>
        );
     }
     return (<div>Loading</div>);

}