React component returning raw HTML

user_3330490 0
Viewed 9046

I have a React component that returns a HTML table.

Invoked using: <Options list={item} />

This is the functional component that returns the table: 

const Options = (props) => {

let table = `
<table className="table table-striped table-hover ">
        <thead>
            <tr>
            <th>#</th>
            <th>Option</th>
            <th>Votes</th>
        </tr>
        </thead>
        <tbody>
`

for (let i = 0; i < props.list.options.length; i++){
    table += `<tr>
    <td>${i+1}</td>
    <td>${props.list.options[i].option}</td>
    <td>${props.list.options[i].vote}</td>
    </tr>
    `
}

table += `</tbody></table>`
return table;
}

But what I see on screen is:

enter image description here

How come the HTML is not being rendered by the browser?

jsx reactjs javascript
4 Answers

You are returning string. You should do it like this

    const Options = (props) => {

    let table = 
       (<table className="table table-striped table-hover ">
          <thead>
            <tr>
              <th>#</th>
              <th>Option</th>
              <th>Votes</th>
            </tr>
          </thead>
          <tbody>
             {props.list.options.map((op, i) => {
                return (
                <tr key={i}>
                   <td>{i+1}</td>
                   <td>{op.option}</td>
                   <td>{op.vote}</td>
                </tr>
                )
             })};
          </tbody>
        </table>);

    return table;
  }
user_72323000

Your function is returning a string. Strings are valid React Elements, but they are rendered as textNodes. For security/semantic reasons, your browser will never interpret nodes that are explicitly text as html. For React to render DOM nodes, the Element must be of a higher level type.

The other answers give you a way to convert your code to have the behaviour you wanted, but I thought I could add some context around why your code is acting the way it is.

user_30533610

If you use JSX like below, it will render as HTML:

return <div> {table} </div>

But I would write this functional component as:

const Options = props => {
  const tableBody = props.list.options.map((obj, i) => (
    <tr key={i}>
      <td>{i + 1}</td>
      <td>{obj.option}</td>
      <td>{obj.vote}</td>
    </tr>
  ));

  return (
    <table className="table table-striped table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>Option</th>
          <th>Votes</th>
        </tr>
      </thead>
      <tbody>{tableBody}</tbody>
    </table>
  );
};
user_27677550

If anyone wanted, you can interpret HTML string as a dom element like below example

// Get a hook function
const {useState} = React;

const Example = ({title}) => {
  const [string, setString] = useState('<div><table><tr><th>head 1</th><th>head 2</th><th>head 3</th></tr><tr><td>data 1</td><td>data 2</td><td>data 3</td></tr><tr><td>data 4</td><td>data 5</td><td>data 6</td></tr></table></div>');
  
  

  return (
    <div dangerouslySetInnerHTML={{ __html: string}} />
  );
};

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

user_52298710
Related