object Object вместо html тега br

Question

Ситуация следующая, пишу приложение на функциональном компоненте React.js, в стейт забиваю значение текстового инпута, а после беру в этом стейте все его значения и вывожу в параграф в другой части страницы.

Проблема в том, что значения стейта выводятся друг за другом, в одну строку, а мне нужно оформить так, что бы они выстраивались в стоблик, для этой задачи мне подойдёт тег разрыва строки <br/>, но проблема в том, что когда я его прописываю, то в выводе я получаю тот же вывод в одну строку, но с разделителем [object Object]

Какие есть варианты решения ?

Добавление брейка пробовал сделать по-разному, но результат одинаковый, вот вариант с джойном в параграфе

<p>
    {state.join(<br />)}
</p>

вот вариант добавления брейка на этапе сетСтейта

setState([...input, input.value + <br/>])

В обоих случаях, в рендере вижу

Item 1[object Object]Item 2[object Object]Item 3

Вместо желаемого

Item 1
Item 2
Item 3

Answer 1

<br/> тут считается элементом jsx, который и является объектом.

Вместо этого нужно было использовать строку

state.join('<br />')

Результатом будет html строка, поэтому для ее вывода нужно воспользоваться либо специальными средствами, типа dangerouslySetInnerHTML либо отдельными библиотеками для вывода html в реакте.

Так же можно было использовать .map

state.map(el => <>{el}<br/></>)

БЛОГ НА HUSL

object Object вместо html тега br

Ответы (1 шт):