How can I pass HTML as props in ReactJS

Question

I have an HTML tag value in my state variable as

this.state = {
    value: '<p>This is a paragraph</p>'
}

I want to display this HTML content in my child component. I'm trying to do as

<Childcomponent value={this.state.value} />

So that i can use the props to access the value inside the child component. My child component is

render() {
    return(
        <div>{this.props.value}</div>
    )
}

But this produces some errors. How can I fix this? Is there any other solution? Thanks in advance.

Possible duplicate of [Reactjs convert to html](https://stackoverflow.com/questions/19266197/reactjs-convert-to-html) — Jibin Joseph, Mar 21 '19 at 09:37

Eliran · Answer 1 · 2019-03-21T09:37:16.380

4

you should use jsx for this,

const someHtml = (<p>This is a paragraph</p>)

and then pass it to your child component as prop like this (prop type is node)

<Childcomponent value={someHtml} />

and render it like any other variable {value} in the child component

edited Mar 21 '19 at 09:37

answered Mar 21 '19 at 09:31

Eliran

320
2
15

I'm dynamically setting the state value. How can i do that? – Hareesh Mar 21 '19 at 09:33
you can use the state also for creating the html like so const someHtml = (
{this.state.value}
) – Eliran Mar 21 '19 at 09:38
In the console of parent component when i get like`{$$typeof: Symbol(react.element), type:'p'}` format i get the child component correctly. But when i get the console with pure html like `
This is paragraph
` I get the error. – Hareesh Mar 21 '19 at 10:10

score 3 · Answer 2 · answered Mar 21 '19 at 09:36

3

I wouldn't recommend doing it, but if you know what you are doing, you can use dangerouslySetInnerHTML prop. So, your ChildComponent should be something like

function ChildComponent(props) {
  return <div dangerouslySetInnerHTML={props.value} />
}

But, like I said, I don't recommend doing it, as it can be vulnerable for XSS attacks. You can find more info in React Docs

answered Mar 21 '19 at 09:36

magneticz

2,400
1
19
18

In the console of parent component when i get like`{$$typeof: Symbol(react.element), type:'p'}` format i get the child component correctly. But when i get the console with pure html like `
This is paragraph
` I get the error. – Hareesh Mar 21 '19 at 10:11
Is there any method to change the HTML to react element? Whan I set the state i get only as HTML – Hareesh Mar 21 '19 at 10:40
I don't really understand what you mean. Can you describe your use case? I don't know what you are trying to accomplish with passing html as prop. Usually you don't set the state to html, rather have html as component, and pass data to it, like Eliran's answer. without understanding what you are trying to accomplish it is hard to give proper answer, but this answer does exactly what you are asking in the question – magneticz Mar 21 '19 at 13:00
Mine is a drag and drop functionality. When I drag and drop a text or paragraph I just want to send that `
` to the child component which populates the dropped area.
– Hareesh Mar 21 '19 at 13:30
I can't tell you all details how to implement it in a comment here, but you definitely should not pass around html elements as string values in that use case. What you can do is to have components that are draggable and based on drag and drop events save it in state(not string, but component itself). Later, you can use that state value to render that component. You can search on internet for react drag and drop, there is even library for that – magneticz Mar 21 '19 at 21:52

score 3 · Answer 3 · answered Mar 21 '19 at 09:39

I think the approach is wrong here.

Firstly, state should be reserved for values that change or data coming in from an API. I would not say that a html snippet should be part of an applications state.

Eliran suggests an approach, but again whereby the child component is expecting a prop called value.

There is also another way, which is 'children' where you can squirt in html to a child component.

E.g.

<Childcomponent value={somePropToPassDown}>
    <p>This is a paragraph</p>
</ChildComponent>

and in the component itself....

const ChildComponent= (props) => {
    return (
        <div>
            <p>{props.value}</p>
            {props.children}
        </div>
    )
}

Have a read of this article on React Children which explains in more detail

score 1 · Answer 4 · answered Mar 21 '19 at 09:50

Don't set the value as string instead you can set the value dynamically wrapping the text with a html element.

constructor(props) {
 super(props);
 this.state = {
  value: ''
 }
}

componentDidMount = async () => {
 this.setState({
  value: <p>This is a paragraph</p>
 })
}

By this way you can set and render the html element dynamically.

You can also use dangerously set inner html. Here is the link for the reference, https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html.

How can I pass HTML as props in ReactJS

4 Answers4