React-native-render-html: Warning for unique "key" prop when rendering HTML

Created on 10 Nov 2017 · 12Comments · Source: meliorence/react-native-render-html

Hi,

I upgraded to 3.5.0 as well as some react modules and I am now receiving a warning on rendering html.

"Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of HTML. See https://fb.me/react-warning-keys for more information.

It goes away if I comment out return <HTML html={description} renderers={renderers} />; so I know it has to do with the HTML I am attempting to render.

It also calls out this line specifically
p: (htmlAttribs, children, passProps) => <Text style={{ fontWeight: 'normal', color: '#333', fontSize: 14, fontFamily: 'roboto_slab' }} {...passProps}>{children}</Text>,

Here is my package.json

  "dependencies": {
    "@expo/vector-icons": "^5.2.0",
    "axios": "^0.16.2",
    "expo": "^22.0.0",
    "moment": "^2.18.1",
    "numeral": "^2.0.6",
    "react": "16.0.0-beta.5",
    "react-native": "https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz",
    "react-native-button": "^2.1.0",
    "react-native-communications": "^2.2.1",
    "react-native-loading-spinner-overlay": "^0.5.2",
    "react-native-navigation": "^1.1.262",
    "react-native-offline": "^3.1.0",
    "react-native-render-html": "^3.5.0",
    "react-native-search-box": "^0.0.13",
    "react-navigation": "^1.0.0-beta.11",
    "react-redux": "^5.0.5",
    "redux": "^3.7.2",
    "redux-persist": "^4.8.3",
    "sentry-expo": "^1.6.0"
  }

bug help wanted

Source

nwkeeley

👍1

Most helpful comment

For anyone who might have landed on this issue, if you're experiencing key warnings when using custom renderers, you need to use passProps.key and pass it to your component to get rid of the yellow box.

Exilz on 8 Feb 2018

👍6

All 12 comments

What fixed it for me was on this line:
https://github.com/archriss/react-native-render-html/blob/master/src/HTML.js#L381

I just added tossed in a random number.... not a great fix but seems to identify where the issue lies.

const rand = Math.random() * (1000 - 1) +1
const key = `${wrapper}-${parentIndex}-${nodeIndex}-${tagName}-${index}-${parentTag}-${rand}`;

nwkeeley on 10 Nov 2017

Hi,
if you disable your custom renderer, does the warning still appear ?

If it does, can you show me the snippet of HTML you're trying to render ?

Exilz on 10 Nov 2017

Hi Exilz, I submitted a PR that seems to do the trick for me... just salting that key a bit more to ensure uniqueness

The snippet of HTML was simply four paragraph tags that I grabbed from lorem ipsum

nwkeeley on 10 Nov 2017

let me rollback to the previous version to reproduce and paste in here what the resulting HTML looked like

nwkeeley on 10 Nov 2017

@Exilz

Here is the HTML, the key which i printed out for you and then the resulting warning in react

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta eros in erat hendrerit laoreet. Sed maximus iaculis lorem id egestas. Mauris malesuada leo nec porta malesuada. In hac habitasse platea dictumst. In sodales tristique nisi, at condimentum massa imperdiet ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In pharetra, felis vel elementum suscipit, justo augue volutpat nisl, sit amet faucibus urna est ut leo. Proin ornare fringilla purus. Ut pellentesque arcu vitae metus posuere efficitur. Sed pellentesque tortor eget odio pharetra eleifend. Phasellus a purus viverra, interdum ante in, interdum turpis. Pellentesque molestie aliquam porta.</p><p>Donec luctus ligula est, vel condimentum enim egestas id. Nam ullamcorper diam ipsum, sit amet semper magna sollicitudin et. Cras lacus sapien, placerat at sem a, venenatis lacinia ex. Quisque vel erat eu magna pellentesque ultricies. Donec consectetur est eget velit posuere, ac placerat dolor semper. Integer at pretium est. Duis fringilla augue aliquam eros vulputate elementum. In nec quam massa. Proin vehicula odio vel nisl ultricies, eget varius velit rhoncus. Quisque dolor ipsum, semper ac efficitur scelerisque, vestibulum eu massa.</p><p><br /></p><p>Fusce condimentum viverra risus, sit amet efficitur lorem sodales sit amet. Aliquam eleifend nulla enim, ut suscipit nisi viverra ac. Integer blandit eu felis nec maximus. Pellentesque viverra ornare orci, non tristique tortor pulvinar ac. Integer aliquam euismod venenatis. Fusce efficitur sit amet purus a accumsan. Donec ac dapibus eros. Nulla facilisi. Donec sodales nibh non dictum bibendum. Ut ut finibus mi. Proin augue ante, condimentum eu sollicitudin eu, ultrices iaculis diam.</p><p><br /></p><p>Cras id convallis sem. Quisque accumsan mauris vitae ante semper blandit. Pellentesque commodo risus eu metus pharetra, vel dapibus tellus mattis. Vivamus mollis viverra lorem. Morbi sollicitudin ligula sit amet velit egestas vehicula. Nullam tincidunt magna tristique urna posuere aliquet. Donec elit nisl, euismod ut vehicula tristique, suscipit quis nibh. In sed euismod nisl.</p><p><br /></p><p>Vestibulum condimentum elementum rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin suscipit aliquet est, non pretium purus vulputate non. Donec enim diam, gravida dignissim augue in, bibendum gravida dolor. Proin a efficitur nisi. Sed porttitor scelerisque magna, id fringilla nulla egestas vitae. Etiam at vulputate elit.</p>

HTML KEY:  Text-0-0-p-0-false
HTML KEY:  Text-0-0-rawtext-0-undefined
HTML KEY:  Text-0-1-p-1-false
HTML KEY:  Text-1-0-rawtext-0-undefined
HTML KEY:  Text-0-2-p-2-false
HTML KEY:  Text-2-0-br-0-p
HTML KEY:  Text-0-3-p-3-false
HTML KEY:  Text-3-0-rawtext-0-undefined
HTML KEY:  Text-0-4-p-4-false
HTML KEY:  Text-4-0-br-0-p
HTML KEY:  Text-0-5-p-5-false
HTML KEY:  Text-5-0-rawtext-0-undefined
HTML KEY:  Text-0-6-p-6-false
HTML KEY:  Text-6-0-br-0-p
HTML KEY:  Text-0-7-p-7-false
HTML KEY:  Text-7-0-rawtext-0-undefined
HTML KEY:  Text-0-0-p-0-false
HTML KEY:  Text-0-0-rawtext-0-undefined
HTML KEY:  Text-0-0-p-0-false
HTML KEY:  Text-0-0-rawtext-0-undefined
HTML KEY:  Text-0-0-p-0-false
HTML KEY:  Text-0-0-rawtext-0-undefined


▶Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of `HTML`. See https://fb.me/react-warning-keys for more information.
    in Text (at JobComponent.js:22)
    in HTML (at JobComponent.js:258)
    in RCTView (at View.js:113)
    in View (at JobComponent.js:338)
    in RCTView (at View.js:113)
    in View (at ScrollView.js:744)
    in RCTScrollView (at ScrollView.js:852)
    in ScrollView (at JobComponent.js:272)
    in App (created by Connect(App))
    in Connect(App) (at SceneView.js:32)
    in SceneView (at CardStack.js:399)
    in RCTView (at View.js:113)
    in View (at CardStack.js:398)
    in RCTView (at View.js:113)
    in View (at CardStack.js:397)
    in RCTView (at View.js:113)
    in View (at createAnimatedComponent.js:134)
    in AnimatedComponent (at Card.js:26)
    in Card (at PointerEventsContainer.js:55)
    in Container (at CardStack.js:440)
    in RCTView (at View.js:113)
    in View (at CardStack.js:370)
    in RCTView (at View.js:113)
    in View (at CardStack.js:369)
    in CardStack (at CardStackTransitioner.js:103)
    in RCTView (at View.js:113)
    in View (at Transitioner.js:187)
    in Transitioner (at CardStackTransitioner.js:55)
    in CardStackTransitioner (at StackNavigator.js:48)
    in Unknown (at createNavigator.js:48)
    in Navigator (at createNavigationContainer.js:205)
    in NavigationContainer (at SceneView.js:32)
    in SceneView (at TabView.js:79)
    in RCTView (at View.js:113)
    in View (at TabView.js:78)
    in RCTView (at View.js:113)
    in View (created by ViewPagerAndroid)
    in AndroidViewPager (at ViewPagerAndroid.android.js:235)
    in ViewPagerAndroid (at TabViewPagerAndroid.js:153)
    in TabViewPagerAndroid (at TabViewAnimated.js:77)
    in RCTView (at View.js:113)
    in View (at TabViewAnimated.js:252)
    in TabViewAnimated (at TabView.js:216)
    in TabView (at withCachedChildNavigation.js:66)
    in withCachedChildNavigation(TabView) (at TabNavigator.js:54)
    in Unknown (at createNavigator.js:48)
    in Navigator (at createNavigationContainer.js:205)
    in NavigationContainer (at SceneView.js:32)
    in SceneView (at CardStack.js:399)
    in RCTView (at View.js:113)
    in View (at CardStack.js:398)
    in RCTView (at View.js:113)
    in View (at CardStack.js:397)
    in RCTView (at View.js:113)
    in View (at createAnimatedComponent.js:134)
    in AnimatedComponent (at Card.js:26)
    in Card (at PointerEventsContainer.js:55)
    in Container (at CardStack.js:440)
    in RCTView (at View.js:113)
    in View (at CardStack.js:370)
    in RCTView (at View.js:113)
    in View (at CardStack.js:369)
    in CardStack (at CardStackTransitioner.js:103)
    in RCTView (at View.js:113)
    in View (at Transitioner.js:187)
    in Transitioner (at CardStackTransitioner.js:55)
    in CardStackTransitioner (at StackNavigator.js:48)
    in Unknown (at createNavigator.js:48)
    in Navigator (at createNavigationContainer.js:205)
    in NavigationContainer (at App.js:241)
    in AppWithNavigation (created by Connect(AppWithNavigation))
    in Connect(AppWithNavigation) (at App.js:341)
    in Provider (at App.js:340)
    in App (at withNetworkConnectivity.js:140)
    in withNetworkConnectivity(App) (created by AwakeInDevApp)
    in RCTView (at View.js:113)
    in View (created by AwakeInDevApp)
    in AwakeInDevApp (at registerRootComponent.js:36)
    in RootErrorBoundary (at registerRootComponent.js:35)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:126)
    in AppContainer (at renderApplication.js:34)

nwkeeley on 10 Nov 2017

52 PR should fix the issue...

nwkeeley on 10 Nov 2017

Is this still problematic ? None of the HTML content I'm rendering on my apps warn me of this anymore. Only if I add custom renderers and forget to use passProps.key.

Exilz on 12 Jan 2018

@Exilz Yes it only occurs for custom renderers but we could resolve it easily.

baoanhng on 8 Feb 2018

Exilz on 8 Feb 2018

👍6

@Exilz thanks! Perhaps this is worth mentioning in the docs?

omairvaiyani on 13 Mar 2018

👍1

@Exilz passProps.key should add where? Can someone please document it? when i console log it shows undefined.
renderers={{ hr: (htmlAttribs, passProps) => console.log(passProps.key) }}