React ขึ้นบรรทัดใหม่จากข้อความ Textarea ที่ดึงมาจาก MongoDB แล้วมาแสดงใน Table

แค่ชื่อบทความก็ยาวล๊าวววว แต่คือมันตามนั้นจริงๆ เพราะปัญหาในคราวนี้คือ เคนทำการดึงข้อมูลจาก MongoDB แล้วมันได้ข้อมูลแบบนี้

บริการรับแก้ปัญหาเพจ Facebook\nแก้เรื่องการมองเห็น, เพจเกือบโดนปิด, โฆษณาไม่ได้, โปรโมทโพสต์ไม่ได้\nแก้ปัญหาแบบผิดๆ ส่งผลให้เพจหายไปเร็วกว่าที่คิด\n\nติดต่อเรา Line ID: @toskysoft\n\nอ่านรายละเอียดบริการได้ในลิงค์ที่แนบไว้ในโพสต์ด้านล่าง\n\nhttps://www.facebook.com/toSKYsoft/photos/a.740529582736419/1883375248451841/?type=3"

จะเห็นว่า Line Break หรือตัวจุดขึ้นบรรทัดใหม่ของมันอ่ะ จะเป็น \n ทำให้เวลาเอามาแสดงใน Table แล้วมันไม่ยอมขึ้นบรรทัดใหม่อ่ะสิ

แต่ตอนแสดงอะ มันไม่แสดง \n ออกมานะ มันจะเหลือโล้นๆ แบบนี้

บริการรับแก้ปัญหาเพจ Facebook แก้เรื่องการมองเห็น, เพจเกือบโดนปิด, โฆษณาไม่ได้, โปรโมทโพสต์ไม่ได้ แก้ปัญหาแบบผิดๆ ส่งผลให้เพจหายไปเร็วกว่าที่คิด ติดต่อเรา Line ID: @toskysoft  อ่านรายละเอียดบริการได้ในลิงค์ที่แนบไว้ในโพสต์ด้านล่าง 
 https://www.facebook.com/toSKYsoft/photos/a.740529582736419/1883375248451841/?type=3"

เคนไปเจอวิธีแก้ปัญหาอยู่ 2 แบบครับ อยู่ที่ใครจะเอาไปใช้แบบไหนได้เลย โดย HTML ใน JSX พื้นฐานจะเป็นแบบนี้

<table className="table">
  <thead>
    <tr>
      <th>ชื่อ</th>
      <th>ข้อความ</th>
      <th>รายละเอียดเพิ่มเติม</th>
      <th>เวลาที่โพสต์</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{template.name}</td>
      <td>{template.text}</td>
      <td>{template.description}</td>
      <td>{template.date}</td>
  </tbody>
</table>

CSS กำหนด white-space

ใช้ CSS เลยครับ เนี่ยง่ายสุด มันมี 3 ตัวนะ pre, pre-line, pre-wrap สารภาพตามตรงว่าไม่รู้ว่ามันต่างกันยังไง เพราะตอนใช้มันก็เหมือนกันเลย

<td style={{ whiteSpace: 'pre' }}>{template.text}</td>

ในด้านบนมันคือการกำหนดใน React นะ ถ้าแปลออกมาเป็น HTML ธรรมดาจะคือแบบนี้

<td style="white-space: pre">{template.text}</td>

แต่วิธีนี้ปัญหาคือ เวลาก๊อปปี้แล้วไปวางที่ Facebook มันก็จะได้บรรทัดติดกันเหมือนเดิมนี่สิ

.split(‘\n’)

วิธีนี้จะเป็นการเพิ่มโค้ดเข้าไปนิดหน่อยครับ โดยทำการตัดทุกๆ \n แล้วทำการเปลี่ยนเป็นโค้ด HTML ตัวใหม่ลงไป แบบนี้

{template.text.split('\n').map(item => {
  return (
    <span>
      {item}
      <br />
    </span>
  );
})}

ซึ่งวิธีนี้ข้อดีคือมันก๊อปปี้ไปวางใน Facebook แล้วมันเว้นบรรทัดจ้ะ ถ้าสมมติเรามี \n\n ติดกัน มันก็ทำการสร้าง <span><br /></span> ให้เราว่างๆ ทำให้เป็นการเว้นบรรทัดไปด้วยเลย

ทำไมไม่ใช้ .replace(‘\n’, ‘<br />’)

อันนี้เป็นอันแรกสุดที่ลองเลยคือทำการ Replace ค่า \n ให้เป็น <br /> โดยตรงจาก {template.text} เลย ผลลัพธ์คือมันแสดงออกมาเป็นแบบนี้

บริการรับแก้ปัญหาเพจ Facebook<br />แก้เรื่องการมองเห็น, เพจเกือบโดนปิด, โฆษณาไม่ได้, โปรโมทโพสต์ไม่ได้<br />แก้ปัญหาแบบผิดๆ ส่งผลให้เพจหายไปเร็วกว่าที่คิด<br /><br />ติดต่อเรา Line ID: @toskysoft<br /><br />อ่านรายละเอียดบริการได้ในลิงค์ที่แนบไว้ในโพสต์ด้านล่าง<br /><br />https://www.facebook.com/toSKYsoft/photos/a.740529582736419/1883375248451841/?type=3"

แทนที่ React มันจะแปลงเป็น HTML ให้เลย มันกลับเป็นตัวอักษรแทน