react-render-html icon indicating copy to clipboard operation
react-render-html copied to clipboard

add random hex string to key to avoid dupes

Open ffugly opened this issue 7 years ago • 0 comments

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.

ffugly avatar Mar 24 '18 06:03 ffugly