JSX бьёт по рукам

Что не так?

Допустим, надо сделать из строки 'A,B' разметку 

<i>A</i> <b>B</b>

Вы хотите сделать это самым очевидным способом — обработав строку

formatter = input => input.replace('A', <i>A</i>).replace('B', <b>B</b>)

Но, вместо лёгкого решения, вы получаете какую-то фигню вроде [object Object],[object Object].

Почему так?

Мистер JSX только делает вид что HTML в нём — это строки. Это ни капельки не строки, а очень даже DOM-объекты. И операции работы со строками, которые вы пытаетесь провести своими грязными ручонками, попросту ничего не дадут.

В лучшем случае вы получите знаменитый [object][Object] вместо желаемой разметки.

Что же делать?

Ну, как обычно, страдать. Есть неплохой вариант — разбивать строку на массив элементов и каждому из них давать свой шаблон и складывать в массив-результат.

formatter = input => {let result = [];input.split(',').forEach(e => {switch (e) {case 'A':result.push(<i>{e}</i>);break;case 'B':result.push(<b>{e}</b>);break;}});return result}

М-м-м-м, сколько кода…

А просто сделать замены в строке, засунув туда HTML — нельзя.