React component returning raw HTML

react render html string
react return html
return html string in react
react render html without dangerouslysetinnerhtml
react render html file
render string as html
react element
string to html tag react

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:

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

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;
  }

Rendering raw html with reactjs, export class ModalBody extends Component{ rawMarkup(){ var rawMarkup = this​.props.content return { __html: rawMarkup }; } render(){ return( <div  React components are the fundamental unit of a client-side application written in React. React components are useful because they provide access to the React support for creating features by combining JavaScript, HTML, and other components.

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>
  );
};

React component returning raw HTML, You are returning string. You should do it like this const Options = (props) => { let table = (<table className="table table-striped table-hover  When doing server-side rendering with react-dom-stream, components from react-raw-html can embed either strings or streams of raw HTML. Installation npm install react-raw-html API RawHtml.<tagname> All of the current non-empty HTML 5 tag names should be present on the RawHtml object as components. So if you want to embed raw HTML in a span, use RawHtml.span. If you want a div, use RawHtml.div. You get the idea. RawHtml.addTag(String)

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.

How to render raw HTML content in React JS?, How to render raw HTML content in React JS? The return keyword inside the component's function is used to render the result. When a component renders a string value, it is included as text content in the parent element. React Components. Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function. Components come in two types, Class components and Function components, in this tutorial we will concentrate on Class components.

Inserting Raw HTML · Issue #527 · reactjs/react-rails · GitHub, This is what i have done Sample Component File var SampleComponent = React​.createClass({ render: function() { return ( {this.props.html} ); For anyone who stumbles upon this from Google since it is one of the first results for how to render raw HTML in React, the above syntax is not correct. The correct syntax is: < div dangerouslySetInnerHTML = {{__html: this.props.html}} />

How to render HTML in React, Find out how to render an HTML string in the DOM without escaping, HTML string in a React application, coming from a WYSIWYG editor, You can use the dangerouslySetInnerHTML attribute on an HTML element to add  Preventing Component from Rendering . In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return null instead of its render output. In the example below, the <WarningBanner /> is rendered depending on the value of the prop called warn.

DOM Elements – React, The checked attribute is supported by <input> components of type checkbox or function createMarkup() { return {__html: 'First · Second'}; } function  React.js By Example: Interacting with the DOM posted in Javascript , React on September 17, 2015 by James K Nelson This article is based on the code from part 2 of my Learn Raw React series: Ridiculously Simple Forms .

Comments
  • It's because you are actually returning a string.
  • I'd encourage you to learn about JSX, and the difference to a string of HTML, which is what you are using as of now.
  • You are missing key.