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 = () => (
{myArray.map(item => <div>{item}</div>)}

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

Javascript Application Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store