My First React Project & React State | Day 5 & 6
source link: https://dev.to/developerioweb/my-first-react-project-react-state-day-5-6-4b21
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
My First React Project & React State
The State is a Object
where we store our values that belongs to the Component.
But what are Objects🤔 ??
- So we have heard about the
variables
, they are the containers which used to store the data values.
Objects are also Variable but they can contain many values.
Like,
const car =
{
color:"Red",
Model:"3",
Name:"Tesla"
}
Enter fullscreen mode
Exit fullscreen mode
But we already have props
then why we need the State.
- Props used to pass data to Component but we can’t change the data once passed.
- But state is used to store the Dynamic data .
-
It’s helps in making the Dynamic Web Application.
Also we need something which keep track what is happing in our Application.
State is Designed to Change in Response to the Event.
- As u can see in the above example the uses of state.
We use state to find out like whether a user is logged-in or logged-out and display the different Screen depending upon the case.
So every time we are doing something we are changing the State of our Component like we click to read more
and the text expands this is also a state change.
Also there are 2 types of State changes which state keep track of
-
UI Logic → When we are changing the State of the Interface
Like, we click on some button and a pop-up opens so this comes under the UI logic.
-
Business Logic → When we are changing the state of the Data.
Like, we are Deleting some message.
To use the State u should use the class Component instead of Functional Component.
- React state is an Object
like if u did this.state
same as the this.props
it will return a object which will have the key-value pairs.
we set/initialize the state in the Constructor Function.
Another thing is that we have to declare/initialize our State but in the case of props they are already Declared.
Like,
**if u did like this
{this.state} -> this will give the error
but if we do like
{this.props} -> this will not give any error if there is nothing in that it is not
rendered.**
Enter fullscreen mode
Exit fullscreen mode
Code Explanation →
So the Code Look like this👇
constructor(props){
super(props);
this.state={
score:0
}
}
Enter fullscreen mode
Exit fullscreen mode
So we have made a Constructor which take props
as an argument after that we have call the Super with props as Argument
So to explain this thing let’s first understand the use of the super
Look at the Code Below
class Component{
constructor(){
console.log('Inside Constructor of Component');
}
}
class App extends Component{
constructor(){
console.log('Inside the Constructor of App');
}
}
const x = new App();
Enter fullscreen mode
Exit fullscreen mode
When u ran this , a error will pop-up that say.
so we have to use the Super
to use the functionality of the derived class.
But why we use the props as a argument in the Super 🤔?
As u know that the props are pre-declared and accessible throughout the Component But they are not accessible inside the Constructor.
class ScoreKeeper extends React.Component{
constrctor{
super();
this.state={
name=**this.props.name**
}
}
render(){
return (
<h1>Score : {this.state.score}</h1>
)
}
}
Enter fullscreen mode
Exit fullscreen mode
If u try to run , this will give the error cuz the props are not accessible inside the constructor to use them we should use **super(props)
;**
So when we need to use the props inside the Constructor we should take them as a argument otherwise not.
Another way of Defining the State
class ScoreKeeper extends React.Component{
state={
score:0
}
render(){
return (
<h1>Score : {this.state.score}</h1>
)
}
}
Enter fullscreen mode
Exit fullscreen mode
- So we can also define like this
state={
score:0
}
Enter fullscreen mode
Exit fullscreen mode
But this isn’t a valid JavaScript , Babel Convert it in the valid JavaScript code.
Setting States→
- this.setState() expects an object to be passed as an Argument also u can pass a Function in this or there are other ways of using this also.
- Also the keys which we passed as an Object are changes and other remains unchaged.
- This process is Asynchronous → Means React will not do it Immediately.
this.state = {num:0};
this.state = {num:99};
**Don't do like this to change the state**
Enter fullscreen mode
Exit fullscreen mode
Don’t use the setState() method inside the Constructor Function and also not in the render.
Example 👇
import React, { Component } from 'react'
class Random extends Component {
constructor(props){
super(props);
this.state={num:0}
this.maketimer();
}
maketimer()
{
setInterval(() => {
let rand = Math.floor(Math.random()*this.props.maxNum)
this.setState({num:rand});
}, 1000);
}
render(){
return(
<h1>{this.state.num}</h1>
)
}
}
export default Random;
Enter fullscreen mode
Exit fullscreen mode
My First Project
This is a PokeGame Project which render 2 pokedex each having 4-4 Pokemon and it will compare the Exp of both the pokedexes and declare the Winner & Loser
Happy Coding!🙂
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK