에러 내용
html의 요소 안 텍스트가 /r 또는 /n으로 줄 바꿈을 하고 있는데 줄 바꿈(개행)이 동작하지 않는다.
에러 원인
웹에서 보여줄 때 몇몇 문자들은 자동으로 인코딩이 하여서 보여주지 않는다.
해결 방법
div {
white-space: pre-wrap;
}위의 css를 해당 요소에 추가하거나
<TabPanel style={{ whiteSpace: "pre-wrap" }}>
{item.data}
</TabPanel>react의 JSX에서는 위와 같이 스타일을 추가한다.
해결 결과 스샷
참고 자료
Newline in react string [Solved]
If you’ve ever wondered how to render the newline character (\n) in a string as an actual newline in your React app, read on. Imagine you have the following boilerplate code: import * as React from 'react'; import * as ReactDOM from 'react-dom'; ReactDOM
forum.freecodecamp.org
white-space - CSS: Cascading Style Sheets | MDN
The white-space CSS property sets how white space inside an element is handled.
developer.mozilla.org
댓글