Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warning for unique "key" prop when rendering HTML

See original GitHub issue

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"
  }

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:12 (3 by maintainers)

Top GitHub Comments

7reactions

Exilzcommented, Feb 8, 2018

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.

1reaction

omairvaiyanicommented, Mar 13, 2018

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