DEV Community

loading...

List Rendering in React

moni_coder profile image Moni ・1 min read

Why we need List Rendering in React

Whenever we need to render same type of components or elements multiple time (with different data) than we use List rendering to automate rendering

How to do List Rendering in React

Javascript map() operator (Introduced in ES6) is used for List Rendering.

Benefits

  1. Reduces Line of code
  2. Automates Rendering

STATIC WAY : NOT EFFICIENT

image

USING MAP

image

You can follow me on my youtube videos channel.

Videos in Hindi

Discussion (2)

Collapse
feichinger profile image
FJones • Edited

I notice that you aren't setting a key prop on the mapped version. React should still throw a warning on that - with good reason, as it does consider it in performance optimizations.

For reference: reactjs.org/docs/lists-and-keys.ht...

Collapse
moni_coder profile image
Moni Author

Yes I will update this post for more such details.

Thanks for reading

Forem Open with the Forem app