Why Won't This Render as JSX? - reactjs

Question

I have a string variable, with this HTML code like so:
this.state.contents:
<p>This Handbook is designed to provide you with information about your employment at {this.props.clientName} and its affiliates and subsidiaries (referred to throughout this Handbook as “{this.props.clientName}” or the “Company”).</p>
I pass it to a child component like this:
<Policy key={filteredPolicy.id} id={filteredPolicy.id} contents={filteredPolicy.contents} clientName={this.state.client}/>
The child component is this:
<Card.Body className="content" >{this.props.contents}</Card.Body>
But in the component, it renders as the string and just shows all the HTML tags. How do I get it to actually render correctly as HTML code? A second issue is the variables of {this.props.clientName} also do not show up... it just literally renders {this.props.clientName} as a string. It all works correctly if I just do it as HTML. But when I try to do it this way, no dice.

Answer 1

While you can still use dangerouslySetInnerHTML to achieve it like this, it's not recommended
function Child({ data }) {
return <div dangerouslySetInnerHTML={{__html: data}}></div>;
}
const test = "test-data";
export default function App() {
const [data] = useState(`<div>${test}</div>`); // note the ${} (template literal) here instead of {}, because this is a string, not React component
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Child data={data} />
</div>
);
}
Live example
Define a renderData function inside Parent component to render your html, pass it to Child as a prop, and call that renderData function here. You can use your state, props inside that renderData function as you want.
So the above example can be rewrite like this
function Child({ renderData }) {
return <div>{renderData()}</div>;
}
const test = "test-data";
export default function App() {
const renderData = () => {
return (
<div>{test}</div>
)
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Child renderData={renderData} />
</div>
);
}
Live example