Rather than creating components to run conditional statements, I would recommend you to apply the principle of functional programming. You can create simple javascript functions that look like this:

const condition1 = true;
const condition2 = true;
const name = 'David';
const myArray = [1, 2, 3];

const renderElement1 = () =>
condition1 && renderElement2() || <span>Something else</span>;

const renderElement2 = () =>
<span>My name is {name}! {condition2 && `Hello ${name}!`}</span>;

Then you can use it that way:

const App = () => (
<div>
{renderElement1()}
{myArray.map(item => <div>{item}</div>)}
</div>
);

You can have a look at a working version here: https://jsbin.com/kebifohemu/edit?html,js,output

Javascript Application Developer

Javascript Application Developer