user3033194 user3033194 - 4 months ago 12x
Javascript Question

Table not rendering properly inside <div> tag in React

I am new to React. I want to load some data in a table when it is available, else show 'Loading'. My

function is currently as shown below:

return (
{ this.state.loaded ? <tbody>{tuples}</tbody> : 'Loading ...' }

My problem is, without the
tags, I get a build error from Gulp, but with them, my table columns are not staying aligned with the data.

Any idea how I can fix this?


You could do the following:

return (this.state.loaded ? <tbody>{tuples}</tbody> : <span>Loading ...</span>);

Basically, React wants your render() function to return a valid ReactComponent. Here, we are returning the <tbody> element if the state.loaded is true; otherwise return the <span>. Both are valid ReactComponents.