React - How to pass HTML tags in props

Question

I want to be able to pass text with HTML tags  like so    lt MyComponent text  This is  lt strong gt not lt  strong gt  working     gt    But inside of MyComponent s render method  when I print out this props text  it literally prints out everything   This is  lt strong gt not lt  strong gt  working    Is there some way to make React parse HTML and dump it out properly

User · Answer

For me It worked by passing html tag in props children   lt MyComponent gt This is  lt strong gt not lt  strong gt  working  lt  MyComponent gt    var MyComponent   React createClass       render  function         return          lt div gt this props children lt  div gt

User · Answer

You can successfully utilize React fragments for this task  Depending on the React version you use  you can use short syntax   lt  gt  or the full tag   lt React Fragment gt   Works especially well if you don t want to wrap entire string within HTML tags    lt MyComponent text   lt  gt Hello World   lt u gt Don t be so ruthless lt  u gt   lt   gt     gt

User · Answer

From React v16 02 you can use a Fragment    lt MyComponent text   lt Fragment gt This is an  lt strong gt HTML lt  strong gt  string  lt  Fragment gt     gt    More info  https   reactjs org blog 2017 11 28 react-v16 2 0-fragment-support html

User · Answer

lt MyComponent text   lt span gt This is  lt strong gt not lt  strong gt  working  lt  span gt     gt    and then in your component you can do prop checking like so   import React from  react   export default class MyComponent extends React Component     static get propTypes         return         text  React PropTypes object     if you always want react components       text  React PropTypes any     if you want both text or react components               Make sure you choose only one prop type

User · Answer

Set the text prop type to any and do this    lt MyComponent text        lt React Fragment gt           lt div gt  Hello  World  lt  div gt       lt  React Fragment gt           gt    Example

User · Answer

You can use mixed arrays with strings and JSX elements  see the docs here     lt MyComponent text    This is     lt strong gt not lt  strong gt     working       gt    There s a fiddle here that shows it working  http   jsfiddle net 7s7dee6L   Also  as a last resort  you always have the ability to insert raw HTML but be careful because that can open you up to a cross-site scripting  XSS  attack if aren t sanitizing the property values

User · Answer

Actually  there are multiple ways to go with that   You want to use JSX inside your props  You can simply use    to cause JSX to parse the parameter  The only limitation is the same as for every JSX element  It must return only one root element   myProp   lt div gt  lt SomeComponent gt Some String lt  div gt     The best readable way to go for this is to create a function renderMyProp that will return JSX components  just like the standard render function  and then simply call myProp   this renderMyProp      You want to pass only HTML as a string  By default  JSX doesn t let you render raw HTML from string values  However  there is a way to make it do that   myProp   lt div gt This is some html lt  div gt     Then in your component you can use it like that    lt div dangerouslySetInnerHTML myProp      html  this renderMyProp      gt  lt  div gt    Beware that this solution  can  open on cross-site scripting forgeries attacks  Also beware that you can only render simple HTML  no JSX tag or component or other fancy things   The array way  In react  you can pass an array of JSX elements  That means   myProp    This is html    lt span gt Some other lt  span gt    and again some other      I wouldn t recommend this method because    It will create a warning  missing keys  It s not readable It s not really the JSX way  it s more a hack than an intended design    The children way  Adding it for the sake of completeness but in react  you can also get all children that are  inside  your component   So if I take the following code    lt SomeComponent gt       lt div gt Some content lt  div gt       lt div gt Some content lt  div gt   lt  SomeComponent gt    Then the two divs will be available as this props children in SomeComponent and can be rendered with the standard    syntax   This solution is perfect when you have only one HTML content to pass to your Component  Imagine a Popin component that only takes the content of the Popin as children    However  if you have multiple contents  you can t use children  or you need at least to combine it with another solution here

User · Answer

Here is a solution that doesn t use the dangerouslySetInnerHTML which is dangerous as the name says  import   IntlProvider  FormattedMessage   from  quot react-intl quot     lt FormattedMessage           id  quot app greeting quot            description  quot Bold text example quot            defaultMessage  quot Look here  I can include HTML tags in plain string and render them as HTML   lt b gt Bold lt  b gt    lt i gt Italics lt  i gt  and  lt a gt links too lt  a gt   quot            values                b   chunks    gt   lt b gt  chunks  lt  b gt               i   chunks    gt   lt i gt  chunks  lt  i gt               a   chunks    gt                   lt a class  quot external link quot  target  quot  blank quot  href  quot https   jiga dev  quot  gt                   chunks                 lt  a gt                                       gt   This should be rendered as   Full example in https   jiga dev react-render-string-with-html-tags-from-props

User · Answer

Adding to the answer  If you intend to parse and you are already in JSX but have an object with nested properties  a very elegant way is to use parentheses in order to force JSX parsing   const TestPage        gt       lt Fragment gt       lt MyComponent property               html             lt p gt This is a  lt a href     gt test lt  a gt  text  lt  p gt                 gt       lt  MyComponent gt     lt  Fragment gt

User · Answer

Parser from html-react-parser is a good solution  You just have to    install it with npm or yarn import Parser from  html-react-parser    call it with     lt MyComponent text Parser  This is  lt strong gt not lt  strong gt  working      gt    and it works well

User · Answer

Have appended the html in componentDidMount using jQuery append  This should solve the problem    var MyComponent   React createClass       render  function              return               lt div gt               lt  div gt                        componentDidMount               ReactDOM findDOMNode this   append this props text

User · Answer

In my project I had to pass dynamic html snippet from variable and render it inside component  So i did the following    defaultSelection         innerHtml     html    lt strong gt some text lt  strong gt        defaultSelection object is passed to component from  js file   lt HtmlSnippet innerHtml  defaultSelection innerHtml    gt    HtmlSnippet component  var HtmlSnippet   React createClass     render  function         return          lt span dangerouslySetInnerHTML  this props innerHtml  gt  lt  span gt                   Plunkr example  react doc for dangerouslySetInnerHTML

User · Answer

On a client-side react application  there are a couple of ways of rendering a prop as a string with some html  One safer than the other    1 - Define the prop as jsx  my preference  const someProps       greeting    lt div gt Hello lt a href  quot    name profile  quot  gt   name profile  lt  a gt  lt  div gt       const GreetingComopnent   props   gt       lt p gt  props someProps greeting  lt  p gt         The only requirement here is that whatever file is generating this prop needs to include React as a dependency  in case you re generating the prop s jsx in a helper file etc   2 - Dangerously set the innerHtml const someProps       greeting    lt React Fragment gt Hello lt a href  quot    name profile  quot  gt   name profile  lt  a gt  lt  React Fragment gt      const GreetingComponent   props   gt      const innerHtml       html  props someProps greeting     return  lt p dangerouslySetInnerHtml  innerHtml  gt  lt  p gt         This second approach is discouraged  Imagine an input field whose input value is rendered as a prop in this component  A user could enter a script tag in the input and the component that renders this input would execute this potentially malicious code  As such  this approach has the potential to introduce cross-site scripting vulnerabilities  For more information  refer to the official React docs

User · Answer

We can do the same thing in such a way  const Child        gt      return        write your whole HTML here         now you want to send this HTML inside another component which name is Parent component  Calling  -  lt Parent child   lt child  gt    gt   lt  Parent gt    Use Of Child -  const Parent    props    gt       const   child     props      return           child           this work perfect for me

User · Answer

You can use dangerouslySetInnerHTML  Just send the html as a normal string   lt MyComponent text  This is  lt strong gt not lt  strong gt  working     gt    And render in in the JSX code like this    lt h2 className  header-title-right wow fadeInRight      dangerouslySetInnerHTML     html  props text     gt    Just be careful if you are rendering data entered by the user  You can be victim of a XSS attack  Here s the documentation  https   facebook github io react tips dangerously-set-inner-html html

User · Answer

This question has already a lot of answers  but I had was doing something wrong related to this and I think is worth sharing   I had something like this    export default function Features       return        lt Section message   lt p gt This is  lt strong gt working lt  strong gt   lt  p gt     gt          but the massage was longer than that  so I tried using something like this   const message        gt   lt p gt This longer message is  lt strong gt not lt  strong gt  working  lt  p gt    export default function Features       return        lt Section message  message    gt          It took me a while to realize that I was missing the    in the function call   Not working   lt Section message  message    gt    Working   lt Section message  message      gt    maybe this helps you  as it did to me

User · Answer

You can do it in 2 ways that I am aware of   1-   lt MyComponent text   lt p gt This is  lt strong gt not lt  strong gt  working  lt  p gt     gt   And then do this  class MyComponent extends React Component      render           return   lt div gt  this props text  lt  div gt            Or second approach do it like this  2-  lt MyComponent gt  lt p gt This is  lt strong gt not lt  strong gt  working  lt  p gt  lt MyComponent  gt   And then do this  class MyComponent extends React Component      render           return   lt div gt  this props children  lt  div gt

User · Answer

You could also use a function on the component to pass along jsx to through props  like    var MyComponent   React createClass       render  function         return          lt OtherComponent         body  this body          gt                   body          return          lt p gt This is  lt strong gt now lt  strong gt  working  lt p gt                     var OtherComponent   React createClass      propTypes        body  React PropTypes func         render  function          return            lt section gt             this props body             lt  section gt

User · Answer

matagus answer is fine for me  Hope below snippet is helped those who wish to use a variable inside   const myVar    not    lt MyComponent text    This is     lt strong gt     myVar    lt  strong gt     working       gt

User · Answer

Yes  you can it by using mix array with strings and JSX elements   reference    lt MyComponent text    This is     lt strong gt not lt  strong gt     working       gt

[reactjs] React - How to pass HTML tags in props?

Examples related to reactjs