user3033194 user3033194 - 5 months ago 13
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

render()
function is currently as shown below:

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


My problem is, without the
<div>
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?

Answer

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.