viewed:video

solved:quiz

solved:problem:easy

solved:problem:medium

Learn React JS and build 3 projects from absolute scratch! This course includes React Router v6, Deployments and much more

React

Refs is the shorthand used for references in React. It is similar to keys in React. It is an attribute which makes it possible to store a reference to particular DOM nodes or React elements. It provides a way to access React DOM nodes or React elements and how to interact with it. It is used when we want to change the value of a child component, without making the use of props.

Refs in React

Each component has several lifecycle phases that you can leverage to run code at particular times in the process. The three phases are: Mounting, Updating, and Unmounting. Mounting: Mounting is the phase of the component lifecycle when the initialization of the component is completed and the component is mounted on the DOM and rendered for the first time on the webpage. Updating: A component is updated whenever there is a change in the component's state or props. Unmounting: This is the final phase of the lifecycle of the component that is the phase of unmounting the component from the DOM.

Component Lifecycle Phases

RG9nZW5kYXIg8J+QtiBoYXRlcyB3YXJuaW5ncyBhbmQgd2hlbmV2ZXIgUmVhY3Qgd2FybnMgaGltIGFib3V0IHNvbWV0aGluZywgaGUgaW1tZWRpYXRlbHkgYXR0ZW1wdHMgdG8gZml4IGl0LiBCdXQsIHRvZGF5IGhlJ3Mgc3R1Y2sgYW5kIGFza2luZyBmb3IgeW91ciBoZWxwLgoKSGUgaGFzIGEgY29tcG9uZW50IHRoYXQgdGFrZXMgYSBwcm9wIGBudW1iZXJzTGlzdGAgd2hpY2ggaXMgYW4gYXJyYXkgb2YgbnVtYmVycywgZS5nLiBgWzEsIDIsIDMsIDRdYC4gSXQgc2VsZWN0cyBldmVuIG51bWJlcnMgZnJvbSB0aGUgYG51bWJlcnNMaXN0YCBhbmQgcmVuZGVycyBhIGxpc3Qgb2YgdGhlc2Ugc2VsZWN0ZWQgZXZlbiBudW1iZXJzIGluc2lkZSA8bGk+IHRhZ3MgKGA8bGk+e251bWJlcn08L2xpPmApLCB3cmFwcGVkIGluIDx1bD4gdGFnLgoKSGUgaXMgZ2V0dGluZyBhIHdhcm5pbmcgdGhhdCBsb29rcyBsaWtlIHRoaXMKCmBgYGJhc2gKV2FybmluZzogRWFjaCBjaGlsZCBpbiBhIGxpc3Qgc2hvdWxkIGhhdmUgYSB1bmlxdWUgImtleSIgcHJvcAoKQ2hlY2sgdGhlIHJlbmRlciBtZXRob2Qgb2YgYE51bWJlckxpc3RgLiBTZWUgaHR0cHM6Ly9yZWFjdGpzLm9yZy9saW5rL3dhcm5pbmcta2V5cyBmb3IgbW9yZSBpbmZvcm1hdGlvbgpgYGAKCkhlIHRyaWVkIHRvIHVzZSBga2V5YCBwcm9wIHRvIGZpeCB0aGUgaXNzdWUgYnV0IGl0IGRpZG4ndCB3b3JrIGFuZCB0aGUgd2FybmluZyBpcyBzdGlsbCB0aGVyZS4gSGUgYWxzbyBub3RpY2VzIHRoYXQgaW5zdGVhZCBvZiBldmVuIG51bWJlcnMgYmVpbmcgcmVuZGVyZWQgaW4gdGhlIGxpc3QsIGFsbCB0aGUgbnVtYmVycyBmcm9tIGBudW1iZXJzTGlzdGAgYXJlIGJlaW5nIHJlbmRlcmVkIGluIHRoZSBsaXN0LgoKSGVscCBEb2dlbmRhciBmaW5kIHRoZSBidWcocykgaW4gdGhlIGNvbXBvbmVudCBnaXZlbiBiZWxvdyBhbmQgZnVsZmlsIHRoZXNlIHJlcXVpcmVtZW50czoKCi0gUmVtb3ZlIHRoZSBrZXkgcHJvcCB3YXJuaW5nCi0gUmVuZGVyIGEgbGlzdCBvZiBldmVuIG51bWJlcnMgKHNlbGVjdGVkIGZyb20gYG51bWJlcnNMaXN0YCBwcm9wKSBpbnNpZGUgPGxpPiB0YWdzCg==

Using Keys in Lists

RG9nZW5kYXIg8J+QtiBoYXRlcyB3YXJuaW5ncyBhbmQgd2hlbmV2ZXIgUmVhY3Qgd2FybnMgaGltIGFib3V0IHNvbWV0aGluZywgaGUgaW1tZWRpYXRlbHkgYXR0ZW1wdHMgdG8gZml4IGl0LiBCdXQsIHRvZGF5IGhlJ3Mgc3R1Y2sgYW5kIGFza2luZyBmb3IgeW91ciBoZWxwLgoKSGUgaGFzIGEgY29tcG9uZW50IHRoYXQgdGFrZXMgYSBwcm9wIGB1c2Vyc0RhdGFgIHdoaWNoIGlzIGFuIGFycmF5IG9mIG9iamVjdHMgY29udGFpbmluZyBpbmZvcm1hdGlvbiBhYm91dCB1c2Vycy4gQW4gZXhhbXBsZSBhcnJheSBpcyBnaXZlbiBiZWxvdwoKYGBganNvbgpbCiAgeyAiaWQiOiAiMSIsICJuYW1lIjogIkFqYXkiLCAiYmlvIjogIkFqYXkiIH0sCiAgeyAiaWQiOiAiMiIsICJuYW1lIjogIkFsb2siLCAiYmlvIjogIkFsb2siIH0sCiAgeyAiaWQiOiAiMyIsICJuYW1lIjogIk1paGlyIiwgImJpbyI6ICJNaWhpciIgfQpdCmBgYAoKRG9nZW5kZXIgd2FudHMgdG8gcmVuZGVyIHRoZSBuYW1lIGFuZCBiaW8gZm9yIHVzZXJzIGluIGEgPGg0PiBhbmQgPHA+IHRhZywgcmVzcGVjdGl2ZWx5LiBJbnN0ZWFkIG9mIHJlbmRlcmluZyBldmVyeSB1c2VyJ3MgZGV0YWlscywgaGUgb25seSB3YW50cyB0byByZW5kZXIgdGhlIGRldGFpbHMgb2YgdGhlIHVzZXJzIHdobyBuYW1lIHN0YXJ0cyB3aXRoIHRoZSBjYXBpdGFsIGxldHRlciAqKkEqKi4gQWxzbywgc2luY2UgaGUgZG9lc24ndCBsaWtlIGV4dHJhIHRhZ3MgdG8gd3JhcCBjb250ZW50LCBoZSB3cmFwcGVkIHRoZSBjb250ZW50IGluIGEgUmVhY3QgZnJhZ21lbnQsIGxpa2UKCmBgYGpzCjw+CiAgPGg0PntuYW1lfTwvaDQ+CiAgPHA+e2Jpb308L3A+CjwvPgpgYGAKCkhlIGl0ZXJhdGVzIG92ZXIgdGhlIGxpc3Qgb2YgdXNlcnMgYW5kIHJldHVybiBhIGZyYWdtZW50IHRvIHdyYXAgPGg0PiBhbmQgPHA+IHRhZ3MuIEJ1dCwgaGUgaXMgZ2V0dGluZyBhIHdhcm5pbmcgdGhhdCBsb29rcyBsaWtlIHRoaXMKCmBgYGJhc2gKV2FybmluZzogRWFjaCBjaGlsZCBpbiBhIGxpc3Qgc2hvdWxkIGhhdmUgYSB1bmlxdWUgImtleSIgcHJvcAoKQ2hlY2sgdGhlIHJlbmRlciBtZXRob2Qgb2YgYFVzZXJzTGlzdGAuIFNlZSBodHRwczovL3JlYWN0anMub3JnL2xpbmsvd2FybmluZy1rZXlzIGZvciBtb3JlIGluZm9ybWF0aW9uCmBgYAoKSGUgcXVpY2tseSB1bmRlcnN0YW5kcyB0aGF0IGhlIG5lZWRzIHRvIGdpdmUgYSBga2V5YCBwcm9wIGJ1dCBub3Qgc3VyZSB3aGVyZSEgSGUgYWxzbyBub3RpY2VzIHRoYXQgaW5zdGVhZCBvZiB1c2VycyB3aG9zZSBuYW1lIHN0YXJ0cyB3aXRoIHRoZSBjYXB0YWwgbGV0dGVyICoqQSoqIGJlaW5nIHJlbmRlcmVkIGluIHRoZSBsaXN0LCBhbGwgdGhlIHVzZXJzIGZyb20gYHVzZXJzRGF0YWAgYXJlIGJlaW5nIHJlbmRlcmVkIGluIHRoZSBsaXN0LgoKSGVscCBEb2dlbmRhciBmaW5kIHRoZSBidWcocykgaW4gdGhlIGNvbXBvbmVudCBnaXZlbiBiZWxvdyBhbmQgZnVsZmlsIHRoZXNlIHJlcXVpcmVtZW50czoKCi0gUmVtb3ZlIHRoZSBrZXkgcHJvcCB3YXJuaW5nCi0gUmVuZGVyIGEgbGlzdCBvZiB1c2VycyB3aG9zZSBuYW1lIHN0YXJ0cyB3aXRoIGNhcHRpYWwgbGV0dGVyICoqQSoqLiBNYWtlIHN1cmUgeW91IHVzZSBmcmFnbWVudCBhbmQgZG9uJ3QgaW50cm9kdWNlIGFueSBleHRyYSB0YWdzIHRvIHdyYXAgdGhlIGNvbnRlbnQgb2YgbGlzdCBpdGVtLiBBbHNvLCBkbyAqKm5vdCoqIGNoYW5nZSB0aGUgYGRhdGEtdGVzdGlkPSJyb290ImAgdXNlZCBmb3Igcm9vdCBlbGVtZW50IGluIGNvZGUgYmVsb3cuCg==

Using Keys in Fragments

RG9nZW5kYXIg8J+QtiB3YW50cyB0byBoYW5nb3V0IHdpdGggaGlzIGZyaWVuZCBEb2dlbGluYSBidXQgc2hlIGlzIGJ1c3kgd2l0aCBoZXIgaG9tZXdvcmsuIEhlciBob21ld29yayBpcyB0byBmaW5pc2ggaW1wbGVtZW50YXRpb24gb2YgYSBSZWFjdCBjb21wb25lbnQgdGhhdCByZW5kZXJzIHR3byBsaXN0cy4gRG9nZW5kYXIgZGVjaWRlcyB0byBoZWxwIGhlciBmaW5pc2ggaG9tZXdvcmsgZmFzdGVyIHNvIHNoZSBjYW4gaGFuZ291dCB3aXRoIGhpbS4KClRoZSBjb21wb25lbnQgdGFrZXMgYSBwcm9wIGB1c2Vyc0RhdGFgIHdoaWNoIGlzIGFuIGFycmF5IG9mIG9iamVjdHMgY29udGFpbmluZyBpbmZvcm1hdGlvbiBhYm91dCB1c2Vycy4gQW4gZXhhbXBsZSBhcnJheSBpcyBnaXZlbiBiZWxvdwoKYGBganMKWwogIHsKICAgIGlkOiAiMSIsCiAgICBuYW1lOiAiRG9nZW5kYXIiLAogICAgdG9kb3M6IFsKICAgICAgewogICAgICAgIGlkOiAnMScsCiAgICAgICAgZGF0YTogIkxvb2sgYXQgc29tZSBzdG9ua3MgZGF0YS4uLiIKICAgICAgfSwKICAgICAgewogICAgICAgIGlkOiAnMicsCiAgICAgICAgZGF0YTogIlJlZ3JldCBsb29raW5nIGF0IHN0b25rcyBkYXRhIDpQIgogICAgICB9LAogICAgICAuLi5tb3JlIGVsZW1lbnRzCiAgICBdLAogIH0sCiAgLi4ubW9yZSBlbGVtZW50cwpdCmBgYAoKSGUgaXMgc3VwcG9zZWQgdG8gaXRlcmF0ZSBvdmVyIHRoZSBsaXN0IG9mIHVzZXJzIGFuZCByZW5kZXIgdGhlIGZvbGxvd2luZyBIVE1MIGZvciBlYWNoIHVzZXIKCmBgYGh0bWwKPGRpdj4KICA8IS0tIERvZ2VuZGFyIGlzIHVzZXIncyBuYW1lIGluIHRoaXMgZXhhbXBsZSAtLT4KICA8ZGl2PntuYW1lfTwvZGl2PgogIDxkaXY+CiAgICA8IS0tIEZpcnN0IHRvZG8gLS0+CiAgICA8ZGl2Pkxvb2sgYXQgc29tZSBzdG9ua3MgZGF0YS4uLjwvZGl2PgogICAgPCEtLSBTZWNvbmQgdG9kbyAtLT4KICAgIDxkaXY+UmVncmV0IGxvb2tpbmcgYXQgc3RvbmtzIGRhdGEgOlA8L2Rpdj4KICAgIDwhLS0gTW9yZSB0b2RvcyBmcm9tIHVzZXIncyB0b2RvcyBsaXN0Li4uIC0tPgogIDwvZGl2Pgo8L2Rpdj4KYGBgCgo+IGA8IS0tIC0tPmAgaXMgYSBjb21tZW50IGluIEhUTUwuIFlvdSBkb24ndCBuZWVkIHRvIHVzZSBpdCBpbiBhY3R1YWwgUmVhY3QgY29tcG9uZW50IGltcGxlbWVudGF0aW9uCgpIZWxwIERvZ2VuZGFyIGZpbmlzaCB0aGUgY29tcG9uZW50IGFuZCBmdWxmaWwgdGhlc2UgcmVxdWlyZW1lbnRzOgoKLSBVc2Uga2V5cyBpbiBsaXN0cyBjb3JyZWN0bHkuIFRoZXJlIHNob3VsZCBub3QgYmUgYW55IG1pc3Npbmcga2V5IHByb3Agd2FybmluZwotIFJlbmRlciB0aGUgcmVxdWlyZWQgbGlzdCBjb3JyZWN0bHkgYWNjb3JkaW5nIHRvIHNwZWNpZmljYXRpb25zIGdpdmVuIGluIHByb2JsZW0uIEFsc28sIGRvICoqbm90KiogY2hhbmdlIHRoZSBgZGF0YS10ZXN0aWQ9InJvb3QiYCB1c2VkIGZvciByb290IGVsZW1lbnQgaW4gY29kZSBiZWxvdy4K

Render Two Lists

V2Ugc2hvdWxkIHVzZSBrZXlzIHdoaWxlIHJlbmRlcmluZyBsaXN0cyBpbiBSZWFjdCBiZWNhdXNl

V2hpY2ggb2YgdGhlc2Ugc3RhdGVtZW50cyBhcmUgdHJ1ZSBhYm91dCBrZXlzPyBTZWxlY3QgYWxsIHRoYXQgYXBwbHku

S2V5IHByb3Agb24gYW4gZWxlbWVudCBpcyBwYXNzZWQgdG8gaXRzIGNoaWxkcmVuLg==

SWYgeW91IGdldCBhIHdhcm5pbmcgbGlrZSB0aGlzIGluIGNvbnNvbGUsIHdoYXQgYXJlIHNvbWUgb2YgdGhlIHBvc3NpYmxlIHJlYXNvbnM/IFNlbGVjdCBhbGwgdGhhdCBhcHBseS4KCmBgYGJhc2gKV2FybmluZzogRWFjaCBjaGlsZCBpbiBhIGxpc3Qgc2hvdWxkIGhhdmUgYSB1bmlxdWUgImtleSIgcHJvcApgYGA=

S2V5cyBkb24ndCBoYXZlIHRvIGJlIGdsb2JhbGx5IHVuaXF1ZS4gV2UgY2FuIHVzZSB0aGUgc2FtZSBrZXlzIHdoZW4gd2UgcHJvZHVjZSB0d28gZGlmZmVyZW50IGFycmF5cy4=

A list is a collection of ordered or unordered items. Creating a list is a super common technique for displaying a list of data. In React, you can use the map() function of arrays to iterate over a list and render the data.

Lists and Keys

This video show you how to render a list in react.
A list is a collection of ordered or unordered items. Creating a list is a super common technique for displaying a list of data. In React, you can use the map() function of arrays to iterate over a list and render the data.

Rendering a List (in Hindi)

This video show you how to use keys in list and why are they required to render lists in react.
A “key” is a special string attribute you need to include when creating lists of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys. When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort.

Keys in List (in Hindi)

This video show you why using array index as keys in lists is considered an anti-pattern. We learn when it is safe to use index as keys and when it is unsafe to do so.

Lists and Keys

A list is a collection of ordered or unordered items. Creating a list is a super common technique for displaying a list of data. In React, you can use the map() function of arrays to iterate over a list and render the data.

Concepts

Quizzes

Question 1 of 5

Question 1 of 5

Question 1 of 5

Question 1 of 5

Question 1 of 5

Coding Questions

Using Keys in Lists	easy	1
Using Keys in Fragments	easy	1
Render Two Lists	medium	2