Reactでスペースなどをそのまま表示したい

Question

ReactというよりはHTMLなどの問題かもしれませんが
以下のようなコードでそのままスペースなどを表示しようとしていますが
うまくできないで困っています。。。

''(シングルクォート) などで囲ってみましたがだめでした。。。

うまく書かれたとおりにそのままブラウザで表示できるような
良い方法がないでしょうか。
よろしくお願いいたします。

[index.js]

  1 import React from 'react';
  2 import ReactDOM from 'react-dom';
  3 import './index.css';
  4 import PlainText from './PlainText';
  5 import * as serviceWorker from './serviceWorker';
  6
  7 ReactDOM.render(
  8   <React.StrictMode>
  9     <PlainText />
 10   </React.StrictMode>,
 11   document.getElementById('root')
 12 );
 13
 14 // If you want your app to work offline and load faster, you can change
 15 // unregister() to register() below. Note this comes with some pitfalls.
 16 // Learn more about service workers: https://bit.ly/CRA-PWA
 17 serviceWorker.unregister();

[PlainText.js]

  1 import React, {useState} from 'react';
  2 import { useForm } from "react-hook-form";
  3 import Result from './Result';
  4
  5 function PlainText() {
  6   const {register, handleSubmit, getValues} = useForm();
  7   const [isView, setIsView] = useState(false);
  8   const hideView = () => setIsView(false)
  9   const onSubmitData = () => setIsView(true);
 10
 11   return (
 12     <form onSubmit={handleSubmit(onSubmitData)}>
 13       <div>
 14         <label>Name
 15           <input
 16             type="text"
 17             name="name"
 18             defaultValue="Hoge"
 19             ref={register}
 20           />
 21         </label>
 22       </div>
 23
 24       <div>
 25         <label>Gender
 26           <select
 27             name="gender"
 28             ref={register}
 29             >
 30             <option value="male">male</option>
 31             <option value="female">female</option>
 32           </select>
 33         </label>
 34       </div>
 35
 36       <div>
 37         <label>Age
 38           <input
 39             type="text"
 40             name="age"
 41             defaultValue="20"
 42             ref={register}
 43           />
 44         </label>
 45       </div>
 46
 47       <button type="submit" class="btn-square-little-rich">Apply !</button>
 48
 49       {isView &&
 50         <div>
 51           <Result
 52             values={getValues()}
 53             hideView={hideView}/>
 54         </div>
 55       }
 56     </form>
 57
 58   )
 59 }
 60
 61 export default PlainText;

[Result.js]

  1 import React from 'react'
  2
  3 const Result = props => {
  4   const {values} = props
  5   const namelist = [];
  6   namelist.push("  Name        = " + values.name,
  7                 "  Gender      = " + values.gender,
  8                 "  Age         = " + values.age );
  9
 10   const namelistresult = namelist.map((name) =>
 11     <div>{name}</div>
 12   );
 13
 14   return(
 15     <div>
 16       <hr></hr>
 17       <h2>NameList</h2>
 18       <div>{namelistresult}</div>
 19     </div>
 20
 21   );
 22 }
 23
 24 export default Result;

---

[実際の画面]

---

[表示させたい形式]

  Name        = Hoge
  Gender      = male
  Age         = 20

Answer 1

https://teratail.com/questions/148580

Answer 2

いえ、これはReactの問題ではなく、HTML側の事情です。HTMLでスペースをいくら入れても、（通常は）その個数のスペースで表示されません。

やり方としては、

• <table>で位置を揃える
• inline-blockにしてwidthを指定した<span>で囲む

ような方法が考えられます。プログラムコードのような場面を除けば、「スペースの数で位置合わせする」という発想そのものが、HTMLでは適切でありません。

Comments

[07290729]

maisumakun さん
アドバイスありがとうございます。

"「スペースの数で位置合わせする」という発想そのものが、HTMLでは適切でありません。"
はい、、、おっしゃることや通常はtableやスタイルシートなどで
位置関係を調整するべきということも重々理解しているつもりです。

”プログラムコードのような場面を除けば”
当方が書こうとしているのがまさにこれでして
UIからコードを生成するようなものを作成中で
位置合わせをする目的というよりは
インデントなどの関係で　スペースなどを埋め込むこと自体が必要です。
※すみません、実際のコードと変数名など変えて表現させていただいていますｍ

本来であればYamlやJsonなどで扱うべきかと思われますが
これらの形式とはまた別のコード形態をとっていて
前述のようなスペースなどを埋め込む必要があります。。。
※コードを管理している別のメンバーがいて、これまでの経緯などから
　扱う形式を変更するのが難しい状況です・・・

[07290729]

すみません、おそらく以下の方法でできそうでした。。。
https://teratail.com/questions/148580