Comments (12)
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.
from react-native-render-html.
@Exilz thanks! Perhaps this is worth mentioning in the docs?
from react-native-render-html.
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}`;
from react-native-render-html.
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 ?
from react-native-render-html.
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
from react-native-render-html.
let me rollback to the previous version to reproduce and paste in here what the resulting HTML looked like
from react-native-render-html.
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)
from react-native-render-html.
#52 PR should fix the issue...
from react-native-render-html.
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
.
from react-native-render-html.
@Exilz Yes it only occurs for custom renderers but we could resolve it easily.
from react-native-render-html.
@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) }}
from react-native-render-html.
(htmlAttribs, children, convertedCSSStyles, passProps) => { console.log(passProps.key); }
from react-native-render-html.
Related Issues (20)
- Adjust the height container when inject a custom component in renders (image)
- other fonts don't work for children tags if you set font for parent HOT 1
- Failed prop type: Invalid prop `textDecorationColor` supplied to `Text`
- Render Error, maximum call stack size exceeded (native stack depth) HOT 2
- `<img>` embeds possibly not making use of `srcset` attribute resulting in blurry images HOT 3
- It is slow, it takes to import the components around 2 seconds
- Need Help for Break Lines Implementation HOT 1
- webView props mediaPlaybackRequiresUserAction not work HOT 2
- Not working android Realme device HOT 1
- defaultTextProps style overwrites renderers HOT 1
- Email or text is not showing proper way
- Slow navigate to a screen contains 12k words (including table) HOT 1
- RTL is not working on p or div tag HOT 1
- the app crashes while rendering the table on Android. `table-plugin`
- How to disable Font Scaling in react-native-render-html v6 HOT 1
- Font family not working HOT 2
- React Native 0.74 (Bridgeless) Support HOT 1
- Bullet didn't move with text when add padding to list item
- React 0.74 - Update defaultProps to JavaScript default parameters. HOT 43
- Can not render superscript <sup> tag HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-render-html.