Yeah, Here we go done with module 2, Going and learning slow to complete each part of lesson, Learning something new or sticking with new habits which is been really hard, whereas, You needs to stay motivated and discipline, I hope i building the system to learn,
On the Module 2 learned and convered about topics of Working on State, And here the topics which i needs to recall from the courses,
- UseState Hook
- Forms
- Props vs State
- Complex State
- Rest/ Spread (JS)
In the react useState is an special type of function which it allows to hook and we needs to call it from the top level of our components
Syntax For calling useState hook
1const [name,SetName] = React.useState("AryaStark");
2// name => Its state variable to set the initial value
3// setName => Function which can use to update the state variable.
4
Example Using useState
1import React from 'react';
2
3function Counter() {
4 const [count, setCount] = React.useState(0);
5 return (
6 <button onClick={() => setCount(count + 1)}>
7 Value: {count}
8 </button>
9 );
10}
11export default Counter;
In order understand useState, In the javascript you needs to check on the concept of Array Destructing
From the course on the module 1 we learned about props and its uses, Now here will understand what is the difference between props and state
- Props is used to communicate between components, And in short we can call as properties
- Its like arguments passed to a function
This javascript concept, Which i could like to recall it, So adding up,
- Rest parameter is used to accept many numbers of arguments
- Single parameter that will gather all other parameters into an array
Example 1:
1addTotal(1,1); // 2
2addTotal(2, 4, 6, 8); // 20
3
4function addTotal(...nums) {
5 let totalsum = 0;
6
7 nums.forEach(num => {
8 totalsum += num;
9 });
10
11 return totalsum;
12 }
It must have only single rest parameter, and it has to come last.
Example 2:
1function getName(...firstRest, ...rest) {} // Not Allowed
2function getData(...rest, second, third) {} // Not Allowed
Spread
A Spread is about unpack set of gathered values, Which is combined together into single array
Example 1:
1function getNameInfo(firstName,lastName) {
2 return firstName + lastName;
3}
4const dataInfo = ["Arya","Stark"];
5getNameInfo(...dataInfo); // Arya Stark
6
By Using Object
1const fullName ={
2firstName: "Arya",
3lastName: "Stark"
4}
5const getInfo = {...fullname};
6