Use React App and Keys

 

1. Keys

Keys

help React to identify which items have changed, added, or removed. They should be given to the elements inside the array for 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, we would use IDs (

uniqueNo

) from our data as

keys

.

Example:

1

2

3

4

5

6

7

8

9

const userDetails = [

{

uniqueNo: 1,

imageUrl:

'https://assets.ccbp.in/frontend/react-js/esther-howard-img.png',

name: 'Esther Howard',

role: 'Software Developer'

}

]

JAVASCRIPT

File: src/App.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

import UserProfile from './components/UserProfile/index'

const userDetailsList = [

{

uniqueNo: 1,

imageUrl:

'https://assets.ccbp.in/frontend/react-js/esther-howard-img.png',

name: 'Esther Howard',

role: 'Software Developer'

},

{

uniqueNo: 2,

imageUrl:

'https://assets.ccbp.in/frontend/react-js/floyd-miles-img.png',

name: 'Floyd Miles',

role: 'Software Developer'

},

{

uniqueNo: 3,

imageUrl:

'https://assets.ccbp.in/frontend/react-js/jacob-jones-img.png',

name: 'Jacob Jones',

role: 'Software Developer'

},

{

uniqueNo: 4,

imageUrl:

'https://assets.ccbp.in/frontend/react-js/esther-devon-lane.png',

name: 'Devon Lane',

role: 'Software Developer'

}

]

const App = () => (

<div className="list-container">

<h1 className="title">Users List</h1>

<ul>

{userDetailsList.map((eachItem) => (

<UserProfile userDetails={eachItem} />

))}

</ul>

</div>

)

export default App

JSX

Collapse

The

index.js

file in the folder is considered to be the main file in it. So, a path like

./components/UserProfile

can be used instead of

./components/UserProfile/index

.

Note

Keys used within arrays should be unique among their siblings. However, they don't need to be unique in the entire application.

1.1 Keys as Props

Keys don't get passed as a prop to the components.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

const UserProfile = props => {

const {userDetails} = props

const {imageUrl, name, role, key} = userDetails

console.log(key) // undefined

return (

<li className="user-card-container">

<img src={imageUrl} className="avatar" alt="avatar" />

<div className="user-details-container">

<h1 className="user-name"> {name} </h1>

<p className="user-designation"> {role} </p>

</div>

</li>

)

}

export default UserProfile

JSX

Collapse

If we need the same value in the component, pass it explicitly as a prop with a different name.

Example:

1

2

3

4

5

6

const UsersList = userDetailsList.map((userDetails) =>

<UserProfile

key={userDetails.uniqueNo}

uniqueNo={userDetails.uniqueNo}

name={userDetails.name} />

);

JSX

2. Users List Application

File: src/App.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

import UserProfile from './components/UserProfile/index'

const userDetailsList = [

{

uniqueNo: 1,

imageUrl:

'https://assets.ccbp.in/frontend/react-js/esther-howard-img.png',

name: 'Esther Howard',

role: 'Software Developer'

},

{

uniqueNo: 2,

imageUrl:

'https://assets.ccbp.in/frontend/react-js/floyd-miles-img.png',

name: 'Floyd Miles',

role: 'Software Developer'

},

{

uniqueNo: 3,

imageUrl:

'https://assets.ccbp.in/frontend/react-js/jacob-jones-img.png',

name: 'Jacob Jones',

role: 'Software Developer'

},

{

uniqueNo: 4,

imageUrl:

'https://assets.ccbp.in/frontend/react-js/esther-devon-lane.png',

name: 'Devon Lane',

role: 'Software Developer'

}

]

const App = () => (

<div className="list-container">

<h1 className="title">Users List</h1>

<ul>

{userDetailsList.map((eachItem) => (

<UserProfile userDetails={eachItem} />

))}

</ul>

</div>

)

export default App

JSX

Collapse

File: src/components/UserProfile/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

import './index.css'

const UserProfile = props => {

const {userDetails} = props

const {imageUrl, name, role} = userDetails

return (

<li className="user-card-container">

<img src={imageUrl} className="avatar" alt="avatar" />

<div className="user-details-container">

<h1 className="user-name"> {name} </h1>

<p className="user-designation"> {role} </p>

</div>

</li>

)

}

export default UserProfile

JSX

Collapse

Note

React Error - ENOSPC: System limit for the number of file watchers reached

Since create-react-app live-reloads and recompiles files on save, it needs to keep track of all project files.

To fix the error, run the below commands in the terminal:

1. Insert the new value into the system config

   echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

2. Check that the new value was applied

   cat /proc/sys/fs/inotify/max_user_watches

3. Config variable name (not runnable)

   fs.inotify.max_user_watches=524288

CODING PRACTICE 3

Reusable Banners

In this project, let's build Reusable Banners by applying the concepts we have learned till now.

Refer to the image below:

Design Files

Click to view

• Extra Small (Size < 576px), Small (Size >= 576px), Medium (Size >= 768px)
• Large (Size >= 992px) and Extra Large (Size >= 1200px)

Set Up Instructions

Click to view

• Download dependencies by running 
  npm install
• Start up the app using 
  npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

• The App is provided with

  bannerCardsList
  . It consists of a list of bannerCardItem objects with the following properties in each bannerCardItem object

  Key	Data Type
  id	Number
  headerText	String
  description	String
  className	String

• The value of the key 
  id
   should be used as a key to the 
  BannerCardItem
   component.
• The value of the key 
  className
   should be used as a className for the HTML list item in the 
  BannerCardItem
   component.

Implementation Files

Use these files to complete the implementation:

• src/App.js
• src/App.css
• src/components/BannerCardItem/index.js
• src/components/BannerCardItem/index.css

Resources

Colors

Font-families

Things to Keep in Mind

• All components you implement should go in the 
  src/components
   directory.
• Don't change the component folder names as those are the files being imported into the tests.
• Do not remove the pre-filled code
• Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.

Technology Cards

In this project, let's build Technology Cards by applying the concepts we have learned till now.

Refer to the image below:

Design Files

Click to view

• Extra Small (Size < 576px), Small (Size >= 576px), and Medium (Size >= 768px)
• Large (Size >= 992px) and Extra Large (Size >= 1200px)

Set Up Instructions

Click to view

• Download dependencies by running 
  npm install
• Start up the app using 
  npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

• The App is provided with

  cardsList
  . It consists of a list of cardItem objects with the following properties in each cardItem object

  Key	Data Type
  id	Number
  title	String
  description	String
  imgUrl	String
  className	String

• The value of the key 
  id
   should be used as a key to the 
  CardItem
   component.
• The value of the key 
  className
   should be used for the HTML list item in the 
  CardItem
   component.

Implementation Files

Use these files to complete the implementation:

• src/App.js
• src/App.css
• src/components/CardItem/index.js
• src/components/CardItem/index.css

Important Note

Click to view

The following instructions are required for the tests to pass

• Each 
  CardItem
   should have an HTML image element with 
  alt
   attribute value as the value of the key title in 
  cardsList

Resources

Colors

Hex: #f4faff

Hex: #64748b

Hex: #ffffff

Hex: #ff4f64

Hex: #00a8e7

Hex: #44c4a1

Hex: #fcc200

Hex: #171f46

Font-families

• Roboto

Things to Keep in Mind

• All components you implement should go in the 
  src/components
   directory.
• Don't change the component folder names as those are the files being imported into the tests.
• Do not remove the pre-filled code
• Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.