1

I have written a function to generate a html table in a string:

board = "<table className='Board'><tbody><tr key="0"><Cell key="0-0" isLit={true} /><Cell key="0-1" isLit={true} /><Cell key="0-2" isLit={true} /><Cell key="0-3" isLit={true} /></tr><tr key="1"><Cell key="1-0" isLit={true} /><Cell key="1-1" isLit={true} /><Cell key="1-2" isLit={true} /><Cell key="1-3" isLit={true} /></tr><tr key="2"><Cell key="2-0" isLit={true} /><Cell key="2-1" isLit={true} /><Cell key="2-2" isLit={true} /><Cell key="2-3" isLit={true} /></tr><tr key="3"><Cell key="3-0" isLit={true} /><Cell key="3-1" isLit={true} /><Cell key="3-2" isLit={true} /><Cell key="3-3" isLit={true} /></tr><tr key="4"><Cell key="4-0" isLit={true} /><Cell key="4-1" isLit={true} /><Cell key="4-2" isLit={true} /><Cell key="4-3" isLit={true} /></tr><tr key="5"><Cell key="5-0" isLit={true} /><Cell key="5-1" isLit={true} /><Cell key="5-2" isLit={true} /><Cell key="5-3" isLit={true} /></tr></tbody></table>"

If I format it in VSCode, I will a proper table:

<table className='Board'>
    <tbody>
        <tr key="0">
            <Cell key="0-0" isLit={true} />
            <Cell key="0-1" isLit={true} />
            <Cell key="0-2" isLit={true} />
            <Cell key="0-3" isLit={true} />
        </tr>
        <tr key="1">
            <Cell key="1-0" isLit={true} />
            <Cell key="1-1" isLit={true} />
            <Cell key="1-2" isLit={true} />
            <Cell key="1-3" isLit={true} />
        </tr>
        <tr key="2">
            <Cell key="2-0" isLit={true} />
            <Cell key="2-1" isLit={true} />
            <Cell key="2-2" isLit={true} />
            <Cell key="2-3" isLit={true} />
        </tr>
        <tr key="3">
            <Cell key="3-0" isLit={true} />
            <Cell key="3-1" isLit={true} />
            <Cell key="3-2" isLit={true} />
            <Cell key="3-3" isLit={true} />
        </tr>
        <tr key="4">
            <Cell key="4-0" isLit={true} />
            <Cell key="4-1" isLit={true} />
            <Cell key="4-2" isLit={true} />
            <Cell key="4-3" isLit={true} />
        </tr>
        <tr key="5">
            <Cell key="5-0" isLit={true} />
            <Cell key="5-1" isLit={true} />
            <Cell key="5-2" isLit={true} />
            <Cell key="5-3" isLit={true} />
        </tr>
    </tbody>
</table>

And if I cut and paste directly into an react component in the render, it will show a table.

However, if I were to display the string using a variable,

render() {
    return (
      <div>
        {board}
      </div >
    )
  }

I won't get the table. It just show a string.

enter image description here

I've tried adding "\n" and < br > but it does not show a table.

How do I display the table from this string ?

Thanks.

EBDS
  • 1,244
  • 5
  • 16
  • Does this answer your question? [Rendering raw html with reactjs](https://stackoverflow.com/questions/27934238/rendering-raw-html-with-reactjs) – Konrad Mar 07 '23 at 08:11

1 Answers1

0

You can achieve this like following:

Method1

npm i html-react-parser

import Parser from 'html-react-parser';
<div>{Parser(board)}</div>

Method2:


<div dangerouslySetInnerHTML={{__html: board }} />
Ram Chander
  • 1,088
  • 2
  • 18
  • 36