Multi State React Hooks and Callback Functions

 

1. Declaring Multiple state variables

We can declare multiple state variables by calling useState multiple times

1

2

3

const [var1, setVar1] = useState(initialValue);

const [var2, setVar2] = useState(initialValue);

const [var3, setVar3] = useState(initialValue);

JSX

2. Initializing State

Syntax:

1

const [currentState, setterFun] = useState(initialValue);

JSX

The initial value provided to the useState() can be of any data type

2.1 Providing Object as an initial value

As a best practice, we can provide Object as an initial value when we want to store values that tend to change together

Example:

1

const [comment, setComment] = useState({ name: "", commentText: "" });

JSX

2.2 Providing Array as an initial value

We can provide the array as an initial value to useState()

1

const [commentsList, setCommentsList] = useState([]);

JSX

3. Updating State

We can update the state using setter function by passing value/callback function as an argument

1

const [currentState, setterFun] = useState(initialValue);

JSX

3.1 Updating State using Callback function

Update the state using callback function if the next state is computed based on the previous state

1

setterFun((prevState) => nextState);

JSX

File: src/components/Comments/index.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

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

import { useState } from "react";

import CommentItem from "../CommentItem";

import {

CommentsContainer,

CommentsTitle,

Form,

NameInput,

CommentTextInput,

CommentButton,

CommentsList,

} from "./styledComponents";

const Comments = () => {

const [name, setName] = useState("");

const [commentText, setCommentText] = useState("");

const [commentsList, setCommentsList] = useState([]);

const onChangeName = (event) => setName(event.target.value);

const onChangeCommentText = (event) => setCommentText(event.target.value);

const onAddComment = (event) => {

event.preventDefault();

const newComment = {

id: uuidv4(),

name,

commentText,

};

setCommentsList((prevCommentsList) => [...prevCommentsList, newComment]);

setName("");

setCommentText("");

};

return (

<CommentsContainer>

<CommentsTitle>Comments</CommentsTitle>

<Form onSubmit={onAddComment}>

<NameInput

type="text"

placeholder="Your name"

value={name}

onChange={onChangeName}

/>

<CommentTextInput

placeholder="Your comment"

value={commentText}

onChange={onChangeCommentText}

rows="6"

/>

<CommentButton type="submit">Comment</CommentButton>

</Form>

<CommentsList>

{commentsList.map((eachComment) => (

<CommentItem key={eachComment.id} commentDetails={eachComment} />

))}

</CommentsList>

</CommentsContainer>

);

};

export default Comments;

JSX

Collapse

4. Video Streaming Application Code

Use the below command to get the Final Code for Video Streaming Application

1

ccbp start RHSIVNZK45

SHELL