How to pass Function in Props

 

1. setState() Object Syntax

The

setState()

object syntax can be used while updating the state to the value that is independent of the previous state.

Syntax:

1

2

3

4

5

this.setState(

{propertyName1: propertyValue1},

{propertyName2: propertyValue2}

// and many more...

);

JAVASCRIPT

1.1 Callback vs Object

Callback:

1

2

3

this.setState(prevState => {

return { count: prevState.count + 1 };

});

JAVASCRIPT

It is used while updating the state to a value, which is computed based on the previous state.

Object:

1

this.setState({ quantity: 2 });

JAVASCRIPT

It is used while updating the state to a static value.

2. Sending Function as Callback

We can pass functions as props to child components.

Syntax:

1

<ComponentName functionName={this.functionName} />

JSX

3. Input Element

In React, the Input Element

value

can be handled in two ways:

• Controlled Input
• Uncontrolled Input

3.1 Controlled Input

If the Input Element

value

is handled by a React State then it is called Controlled Input. Controlled Inputs are the React Suggested way to handle Input Element value.

Example:

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

import {Component} from 'react'

class App extends Component {

state = {

searchInput: '',

}

onChangeSearchInput = event => {

this.setState({

searchInput: event.target.value,

})

}

render() {

const {searchInput} = this.state

return (

<input

type="text"

onChange={this.onChangeSearchInput}

value={searchInput}

/>

)

}

}

export default App

JSX

Collapse

3.2 Uncontrolled Input

If the Input Element

value

is handled by the browser itself then it is called Uncontrolled Input.

Uncontrolled inputs are like traditional HTML form inputs. Its

value

can only be set by a user, but not programmatically. However, in controlled input value is programmatically handled using React State.

Example:

1

<input type="text" />

JSX

4. Searchable Users List Application

File: src/App.js

Coding Practice 6

Random Number Generator

In this project, let's build a Random Number Generator by applying the concepts we have learned till now.

Refer to the image below:

Design Files

Click to view

• Extra Small (Size < 576px) and 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

• Initially, the number displayed should be 0
• When Generate button is clicked, a random number should be generated in the range of 0 to 100 and displayed

Implementation Files

Use these files to complete the implementation:

• src/components/RandomNumberGenerator/index.js
• src/components/RandomNumberGenerator/index.css

Quick Tips

Click to view

• You can use

  Math.random()
  function to get a random number (float value) in range 0 to less than 1 (
  0 <= randomNumber < 1
  )
  Math.random()

• You can use

  Math.ceil()
  function to round a number up to the next largest integer
  1

  console.log(Math.ceil(95.906698007537561)); // 96

  JAVASCRIPT

• You can use the

  box-shadow
  CSS property to apply the box-shadow effect to containers
  box-shadow: 0px 4px 16px 0px #bfbfbf;
  
  

• You can use the

  cursor
  CSS property to specify the mouse cursor to be displayed when pointing over an element
  cursor: pointer;
  
  

• You can use the below

  outline
  CSS property for buttons and input elements to remove the highlighting when the elements are clicked
  outline: none;

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/random-no-generator-bg.png

Colors

Hex: #ffffff

Hex: #e4ebf3

Hex: #eaebed

Hex: #0b69ff

Hex: #333333

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.

Destination Search

In this project, let's build a Destination Search app by applying the concepts we have learned till now.

Refer to the image below:

Design Files

Click to view

• Extra Small (Size < 576px) and 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

• Initially, all destinations in the 
  destinationsList
   should be displayed
• When a value is provided in the search input, only the destinations whose names contain the value provided in the search input should be displayed irrespective of the case

• The

  DestinationSearch
  component receives the
  destinationsList
  as a prop. It consists of a list of destination objects with the following properties in each destination object

  Key	Data Type
  id	Number
  name	String
  imgUrl	String

Components Structure

Implementation Files

Use these files to complete the implementation:

• src/components/DestinationSearch/index.js
• src/components/DestinationSearch/index.css
• src/components/DestinationItem/index.js
• src/components/DestinationItem/index.css

Important Note

Click to view

The following instructions are required for the tests to pass

• The search for the destination should be case insensitive. You can use the

  toLowerCase
  method to convert a string into lower case letters.
  1

  2

  const text = 'Learn JavaScript'

  console.log(text.toLowerCase()); // learn javascript

  JAVASCRIPT

• Each

  DestinationItem
  should have an HTML image element with
  alt
  attribute value as the value of the key name in
  destinationsList

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/destinations-search-icon-img.png alt should be search icon

Colors

Hex: #252627

Hex: #0f172a

Hex: #f1f5f9

Hex: #000000

Font-families

• Roboto
• Open Sans

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.

Simple Todos

In this project, let's build a Simple Todos app by applying the concepts we have learned till now.

Refer to the image below:

Design Files

Click to view

• Extra Small (Size < 576px) and 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

• Initially, the list of given todos should be displayed with a delete button for each todo
• When Delete button of a todo is clicked, then the respective todo should be deleted

• The

  SimpleTodos
  will consist of the
  initialTodosList
  . It consists of a list of todo objects with the following properties in each todo object

  Key	Data Type
  id	Number
  title	String

Components Structure

Implementation Files

Use these files to complete the implementation:

• src/components/SimpleTodo/index.js
• src/components/SimpleTodo/index.css
• src/components/TodoItem/index.js
• src/components/TodoItem/index.css

Quick Tips

Click to view

• You can use the

  cursor
  CSS property to specify the mouse cursor to be displayed when pointing over an element
  cursor: pointer;
  
  

• You can use the below

  outline
  CSS property for buttons and input elements to remove the highlighting when the elements are clicked
  outline: none;

Resources

Colors

Hex: #ffc2a0

Hex: #ffffff

Hex: #ff8542

Hex: #000000

Hex: #ff0b37

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.

....