Reactアプリで改行コード("\n")を含んだ文字列を、改行込みで表示したい

Question

やりたいこと

ReactとReduxで九九計算プログラムを作っています。
テキストの入力フォームを2つ用意。テキストボックス１を横軸(x)、２を縦軸(y)とし、例えば、x=5、y=4と入力されたら下記の計算結果をブラウザに表示するようなプログラムです。

【理想】

例：x=5、y=4

出力結果：
1 2 3 4 5      //1の段
2 4 6 8 10　　　//2の段
3 6 9 12 15　　 //3の段
4 8 12 16 20　　//4の段
```

# 解決したいこと

正しい計算結果をブラウザに表示するところまではできましたが、計算結果の数値がブラウザ上にすべて横並びで表示されます（chrome開発ツールのターミナル画面ではちゃんと改行表示される）。'\n''<br/>'ともに同じでした。これを適切な場所で改行されるように変更したいです。

**【今の状況】**

例：x=5、y=4

出力結果:
1 2 3 4 5 2 4 6 8 10 3 6 9 12 15 4 8 12 16 20

# 実際の画面
![イメージ説明](39548e251446b6af7311c86a19d310ef.gif)


# ソースコード

**index.js**
```javascript

import {createStore} from 'redux'
import {Provider} from 'react-redux'
import Counter from '../components/Counter'
import {Keisan} from '../components/Counter'

export let reducer = (state = {num1:0,num2:0,result:0,draw:""}, action) => {
    switch(action.type){
        case 'NUM1':
            return {
                ...state,
                num1: action.payload
            }
        case 'NUM2':
                return {
                ...state,
                num2: action.payload
                }
        case 'ONSUBMIT':
            return {
                ...state,
                result: state.num1 * state.num2
            }
        case 'KEISAN':
            return {
                ...state,
                draw: Keisan(state.num1,state.num2)
            }
        default:
            return state
    }
}

const store = createStore(reducer)

export default () => (
    <Provider store={store}>
        <Counter/>
    </Provider>
)
```

**Counter.js**
```javascript

// やりたいこと
/*Reactアプリで改行コードを含んだ文字列を、改行込みで表示したい
*/

//Reactで改行データを表示する方法
/*
1. スタイルを当てる
   "const styles = { whiteSpace: 'pre-line'}; "
   "<div style={styles}></div>"
2. split
   "var lines = this.props.text.split('\n').map(function(line)"
3.

*/

import React from 'react'
import { connect } from 'react-redux';

export function Keisan(width,height) {
    let string1 = ""
    let string2 = ""
    for(let x=1; x <= height; x++){
      for(let y=1; y <= width; y++){
          string1 = string1 + String(x * y) + ' '
      }
      string2 = string2 + string1 + '\n'
      string1 = ""
    }
    console.log("number2:","\n",string2);
    return string2
}

export let Counter = ({numinput1,numinput2,result,onsubmit,num1,num2,keisan,draw}) => {
    return (
        <div>
           <h2>Counter</h2>
             <div>
                 <label>num1:
                   <input id="num1" type="text" onChange={numinput1} value={num1}></input><br></br>
                </label>
                 <label>num2:
                   <input id="num2" type="text" onChange={numinput2} value={num2}></input><br></br>
                </label>
                <button onClick={onsubmit}>計算</button>
                <button onClick={keisan}>描画</button>
                <div>
                 <span>計算結果:</span>
                 <div>{result}</div>
                 <span>描画結果:</span>
                 <div>{draw}</div>
                 </div>
             </div>
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        num1: state.num1,
        num2: state.num2,
        result: state.result,
        draw: state.draw
    };
}

// recuderのactionに値を渡す
const mapDispatchToProps = (dispatch) => ({
    keisan:() => dispatch({type:'KEISAN',payload:event.target.value}),
    onsubmit:() => dispatch({type:'ONSUBMIT'}),
    numinput1:(event) => dispatch({type:'NUM1',payload:event.target.value}),
    numinput2:(event) => dispatch({type:'NUM2',payload:event.target.value})
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter)
```

Answer 1

まず、前提知識として、ReactのJSX記法の{}の部分には配列を与えることができます。

1. <div>で囲むアプローチ

{}に入る値は[<div>...</div>, <div>...</div>, ...]です。

<span>描画結果:</span>
<div>{draw.split('\n').map(x => (<div>{x}</div>))}</div>

2. <br>を間にはさむアプローチ

{}に入る値は[text, <br />, text, <br />, ..., <br />, text]です。

<span>描画結果:</span>
<div>
  {draw
    .split("\n")
    .reduce((accum, x) => [...accum, x, <br />], [])
    .slice(0, -1)}
</div>

3. CSSのwhite-spaceで解決

質問者のコメントの"whiteSpace: 'pre-line;"も試してみました。

<span>描画結果:</span>
<div style={{ whiteSpace: "pre-line" }}>{draw}</div>

Answer 2

丁寧なご回答ありがとうございます。
さきほど電車の中で試したところ、1,2,3すべてのやり方で動作確認が取れました！

これで、土日は別の課題に取り組めます。
夜分遅くにご対応頂きありがとうございましたm(_ _)m