I have an IF statement like below, where the JSX arguments (if that is what they are called) are the same in each case, the only difference is the component that is rendered:

```
if (type === 'currencySalaryBonus') {
      return <CurrencySalaryBonus key={questionID} data={this.props.data} answer={this.props.answer} nextStepCallback={this.props.nextStepCallback} showTitle={this.props.showTitle} />;
} else if (type === 'age') {
      return <Age key={questionID} data={this.props.data} answer={this.props.answer} nextStepCallback={this.props.nextStepCallback} showTitle={this.props.showTitle} />;
} else if (type === 'name') {
      return <Name key={questionID} data={this.props.data} answer={this.props.answer} nextStepCallback={this.props.nextStepCallback} showTitle={this.props.showTitle} />;
}
.... the list goes on

```

I am wondering if there was some syntactic sugar that i am not aware of that means I can do something like

```
if (type === 'currencySalaryBonus') {
    return <CurrencySalaryBonus {object} />;
} else if (type === 'age') {
    return <Age {object} />;
}
.....

```

Or any other way i can make this less horrific - this IF statement has about 30 conditions.

Many thanks for your help!

I am using Webpack with Babel - ES6 / 7 so can the more modern features if that helps.