ReactJS Whitespace text nodes in <tbody>

Question

For some reason when assigning the variable 'row' as empty, throws the following error:

Whitespace text nodes cannot appear as a child of . Make sure you don't have any extra whitespace between tags on each line of your source code

 render(){

    if(typeof(this.props.settings) ==="undefined"||Object.keys(this.props.settings).length==0)
    {
      //We haven't asked for Admins yet, so they don't exist.
       row ='';
    }
    else {
     ...
      row = nameArray.map((data,index) =>
    <tr key={index}><td>{data}</td>
      <td>{idArray[index]}</td>
      <td><div className="link_decoration" onClick={()=>this.props.removeRequest(idArray[index])}>Remove</div></td>
    </tr>
    );
  }
    return(
      <div>
        <table>
        <tbody><tr><th>Name</th><th>SSO</th><th></th></tr>{row}</tbody></table>
      </div>
    );

  }
}

I can resolve the error by creating a placeholder instead of setting row='':

      nameArray.push("PlaceHolder");
      idArray.push("12345");
      row = nameArray.map((data,index) =>
    <tr key={index}><td>{data}</td>
      <td>{idArray[index]}</td>
      <td><div className="link_decoration" onClick={()=>this.props.removeRequest(idArray[index])}>Remove</div></td>
    </tr>
    );
    }

but there must be a better way...

Answer 1

You could solve it with

<tbody><tr><th>Name</th><th>SSO</th><th></th></tr>{row.length > 0 ? row :null }</tbody></table>

More details about render and its return type could be found from here

Also, it would be a good idea to indent your code.