State and Props in React.
I am using React as front end javascript library now and it is awesome!
when I was a beginner and started developing small projects and I was too annoyed by terms like state and props, reusable components, virtual DOM, etc.
but it took me little time and practice to digest, even though I was following some good resources to build something still I used to forget easily. so, don’t worry if you are a beginner and facing similar issues.
Keep calm and let’s dig deep into it!
State-
The state is nothing but the container of the data structure. Yes, you heard it right. it holds data or information about the component.
One important question that so many interviewers ask during the interview is what is the stateless component? so the simplest answer is that the component that has no state, called a stateless component! any component by default is stateless.
let’s see an example-
function Component(){
return <h1>'Hello React!'</h1>
}Why we use State?
A fairly simple definition is in order to show (render) anything on the screen we need some data, or consume some data from a server we need some container to hold it, called state!
for instance, we simple component that has one button that increases a given number by 1.
import { useState } from "react";
import "./styles.css";
export default function App() {
const [state, setState] = useState(0);
const incrementHandler= () =>{
setState(state+1) //increments state by one on every click
}
return (
<div className="App">
Increment number
<h2>{state}</h2>
<button onClick={incrementHandler}>Add One</button>
</div>
);
}So, here we wanted counter to count and render in our UI. so we wanted our state(data) to start with zero initially, that’s where State came into the picture.
in this above component, I have used a functional component not a class component. I personally feel functional components easier to understand and code. I hope I am sounding relatable…
So we learned that data can be given to a component with the use of state and can be manipulated or altered as well as per the user’s requirement to make it a rich UI experience!
Props-
Props are simply shorthand of properties!
Props help components talk to each other. Whatever data a state has that can be passed to other components using props, how amazing is that right?
Got it? no worries if you still haven’t get it, this we can learn with help of examples, so let’s see one-
let's suppose we have two components:
//Parent Component
import React from 'react'
import Person from './Person'
const App =()=> {
return <Person />
}
export default App;//Child Component
const Person = () => {
return <h3>My name is Prakash and I am learnig React.</h3>;
};
export default Person;
Now let’s suppose this (Person) component you want to use as a reusable component and want to render the same component with different data. now props come into the picture!
let’s see with the help of an instance-
I have added screenshots just to make you guys have a proper understanding and not have even a single confusion in state and props.
here inside the Parent Component (App.js), we give props where the child is imported, no matter how many props you want to give as an attribute you can give for any HTML tag. See line number 6 to 10 in the App.js file.
now whatever data we are passing as a prop (as an attribute to the child component), we have access to all these props inside the child component that can be retrieved! for instance, see line number 2 in Person.js. I am consoling all the data passed as props from parent one. see consoled items right below on the screen.
amazing right? all the data that we gave in the parent component is how we can access a child!
you just learned state and props!
State vs Props
Let’s see the difference between state and props-
states are the data but props are the properties or copied data of one component, where our state can be altered or mutated but the props cannot be mutated. See the below example for a better understanding…
That’s all about state and props!
Also if you guys want to learn about higher functions like map, reduce, and filter I have written amazing content for you guys. Please go and check it out now!
That’s it, dear coders!
If this post was helpful, feel free to share and help others find it!
THANK YOU!