Let's say I have these 2 variables:
const test1 = (<div> ..... </div>); const test2 = (<div> ..... </div>); How do I combine them together (meaning - the code of test1 followed by the code of test2) into a "valid" variable called test3 and then render it like:
{this.array.length !== 0 ? test3 : null} ?
If you are using React 16.2+, use a Fragment:
{this.array.length !== 0 ? <React.Fragment>{test1}{test2}</React.Fragment> : null} 
<><div>...</div><div>...</div></> and it is equivalent. Not that it makes a difference, just so you know the newer syntax if you see it.You could use a React Fragment in combination of short-circuit syntax to get it short and sweet.
render() { const test3 = <React.Fragment>{test1}{test2}</React.Fragment>; return (this.array.length && test3); } You can make it even shorter by doing this if you're using latest versions of React. Don't have to type React.Fragment ;) The shorthand is <> and
const test3 = {this.array.length !== 0 ? <>{test1}{test2}</> : null } 