react-render-html
react-render-html copied to clipboard
add random hex string to key to avoid dupes
I find this library useful for rendering DraftJS blocks. However, in the event that I have a view component that renders more than one chunk of DraftJS content with renderHTML, I get a duplicate key warning from React.
For example, with a JSX view component that looks something like this:
<h2>About this property</h2>
{renderHTML(draftPropertyDescription)} // - <p>OMG, the property is amazing...</p>
<h2>About the owner</h2>
{renderHTML(draftOwnerBio)} // - <p>OMG, the owner is so cool </p>
I would get a duplicate key error from the output:
<h2>About this property</h2>
<p key="0">OMG, the property is amazing...</p>
<h2>About the owner</h2>
<p key="0">OMG, the owner is so cool</p>
This pull request would simply append a random hex string to the key value so the output would end up like so:
<h2>About this property</h2>
<p key="0-8ead91">OMG, the property is amazing...</p>
<h2>About the owner</h2>
<p key="0-f5888e">OMG, the owner is cool</p>
Result is no more duplicate key errors.