Search for a command to run...
Widely known as fotiecodes, an open source enthusiast, software developer, mentor and SaaS founder. I'm passionate about creating software solutions that are scalable and accessible to all, and i am dedicated to building innovative SaaS products that empower businesses to work smarter, not harder.
I recently started learning React as well and I must say that this was really enlightening. Thanks for sharing.
Hey, thanks. Happy to help! I'll be sharing more of my journey here...
Lisbon, If you have ever been here, you know the streets are a wild mix of steep hills, narrow cobblestone alleys, and confusing one-way roads. Navigating this city takes serious skill. The yellow tra
If you have been paying attention to the AI space for the last few months, you know the fatigue is real. We have spent three years typing into a box, getting a paragraph of text back, copying it, past
I have always wondered how Apple does their spatial photos on iOS and especially on the new Apple Vision Pro. If you have tried the headset, or even just tilted your phone while looking at a "spatial" capture, you know that weird, distinct feeling of...
Understand the distinctions between Retrieval and Cache-Augmented Generation; find out how CAG improves speed while RAG handles real-time information
I’m sitting here with a hot cup of coffee, about halfway through Google’s new paper on "Nested Learning," and I have to be honest: I need to get this out of my head and onto the screen. Usually, when a big lab drops a paper, I skim the abstract, nod ...
On this page
Hello, world!
I personally just started out learning react and I want to share in a pretty much simple way what I understand about react states and how to use. I'm a newbie at react and like always I just want to share one or two things. So if you are here, you are probably trying to understand how to work with react states,
Well, Good news! You are not alone. when I started off with react I had this issue of getting how states work. And like I always say it. if I can get it, then anyone can. i will walk you through the concept of react states and trust me. it's easier than you think!
State is a JavaScript object that stores a component’s dynamic data and determines the component’s behaviour. Because state is dynamic, it enables a component to keep track of changing information in between renders and for it to be dynamic and interactive.
When adding states it's generally done on to a class component or a functional component.
What then is a class and functional component?
A class component is simply a more featured way to define a React component. It also acts like a function that receives props (params in react), but that function also considers a private internal state as additional input that controls the returned JSX(JavaScript XML). An interesting fact about a class component is that it requires you to extend from React.Component and create a render function which returns a React element.
React components has a built-in state object. The state object is where you store property values that belong to the component. When the state object changes, the component re-renders.
The state object is initialized in our constructor:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
And our state object can contain as many properties as you like:
Specify all the properties your component need:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
While trying to access the state properties in our component , we refer to the state object anywhere in the component by using
this.state.propertyname syntax
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
</div>
);
}
}
To change a value in the state object, use the this.setState() method. When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value(s).
For this we will defiantly need an onClick even handle for a button to update the state when the user clicks , Handling events with React elements is very similar to handling events on DOM elements. However, There are some syntax differences:
For example, the HTML:
<button onclick="activateLasers()">
Activate Lasers
</button>
is slightly different in react:
<button onClick={activateLasers}>
Activate Lasers
</button>
Continuing with our example, we will add a button with an onClick event that will change the color property:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
<button
type="button"
onClick={this.changeColor}
>Change color</button>
</div>
);
}
}
Note: Always use the setState() method to change the state object, it will ensure that the component knows it's been updated and calls the render() method (and all the other lifecycle methods).
On the other hand, a functional component is just a plain JavaScript function which accepts props as an argument and returns a React element. It works slightly like the class component just here we don't have the this keyword
that said we will get something like:
export default function Car() {
const [state, setState] = React.useState({
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
});
const changeColor = () => {
setState({ color: "blue" });
};
return (
<div>
<h1>My {state.brand}</h1>
<p>
It is a {state.color}
{state.model}
from {state.year}.
</p>
<button type="button" onClick={changeColor}>
Change color
</button>
</div>
);
}
We note that. we can set a state only with its setState method!
From all evidence, it does sound less complex when we break it down and try to understand it in chunks!