React: How to pass html as prop

Question

I want to create a component that I'll use as <Component htmldata=? /> <Component htmldata=? /> in a mdx file.

That component will be like that: ...etc render{return{ <div> {this.props.htmldata} </div>}} . To what must I assign the htmldata property to return some HTML inside the div. My aim is to use the same component easily in the mdx file multiple times with different htmldata without having to create another component.

Edit: i recommend using a function that returns html and is binded and passed as a prop. example:

constructor(props) {
super(props);

this.state = {

  linkfunction: this.props.link.bind(this)
}

} this function is passed as a prop like that:

<LiveCode title="MyhtmlComponent" link={function(){return <p>the html i pass </p> ;}} />

Answer 1

If you want put JSX(html) throught props, usually is better use props.childern

React js - documentation (about props childern)

or you can use dangerouslySetInnerHTML

Reactjs - dangerouslysetinnerhtml

Answer 2

You can use dangerouslySetInnerHTML but that is not recommended

Read more here

https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html