JSX тип не может быть выражением, а получение свойства объекта через точку - это тоже выражение.
Поэтому надо это выражение надо заранее вычислить и присвоить переменной. Обязательно с большой буквы (с маленькой буквы называются только заранее заданные теги).
Собственно прямо как написано в разделе документации ссылку на который я Вам уже давал.
Что-то в духе
render(){
let AreaComponent = components[this.state.component];
...
return <Calculated>
}
сomponents - это множество в котором Вы ваши компоненты по имени искать будете. Они же не из воздуха берутся. И структура которая магическим образом соотносит js строчку с каким-то js-объектом (реактовским классом с именем совпадающим со строчкой) все равно нужна. Видимо ваше затруднение лежит в том где ее эту структуру взять.
То есть грубо говоря вам нужен объект вида:
let components = {
'AwesomeComponent': AwesomeComponent,
'SuperComponent': SuperComponent,
'YetAnotherComponent': AwesomeComponent
}
Если Вы используете es6 модули и импортируете компоненты не одной пачкой, то склейка их в одну структуру ложится на вас, так как на текущий момент нельзя по имени обратиться к переменной содержащий весь скоуп модуля.