theJuls theJuls - 1 month ago 5
React JSX Question

React component mounting before receiving appropriate state

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

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

}
Comments