ReactJS - State and Props


CRUD

State

The state is an instance of React Component Class can be defined as an object of a set of overt properties that control the demeanor of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component.

To define a state, we will first declare a default set of values for defining the component's initial state. To do this, integrate a class constructor that assigns an initial state utilizing this.state. The 'this.state' property can be rendered inside the render() method.

The following sample code shows how to engender a stateful component utilizing EcmaScript2016 syntax.

Example

import React from 'react';
class App extends React.Component {
state = {
temperature: 0
};
render() {
return (
<div>
<h1>Greetings from knowledge factory</h1>
<h2>Temperature: {this.state.temperature}</h2>
<button
onClick={() => this.setState(state => ({ temperature: state.
                             temperature + 1 }))}
>
+
</button>
<button
onClick={() => this.setState(state => ({ temperature: state.
                             temperature - 1 }))}
>
-
</button>
</div>
);
}
}
export default App;

In the above code, it has a state object with property/state: count.

A state can simply be understood as a value at that point of time of the particular component/app. In the above example, when the app is first running, the app is with state count === 0

As we can visually perceive there are two buttons + and - that update the value utilizing this.setState, it simply updates the "state" of temperature for the app, and the app will re-render, whenever the state change

Output:




Props

The main distinction between state and props is that props are immutable. This is why the container component should define the state that can be updated and transmuted, while the child components should only pass data from the state utilizing props.

Example

import React from 'react';
import ReactDOM from 'react-dom';
// Parent Component
class App extends React.Component{
render(){
return(
<div>
<h2>You are inside Parent Component</h2>
<Child name="Sibin" userId = "12345"/>
</div>
);
}
}
// Child Component
class Child extends React.Component{
render(){
return(
<div>
<h2>Hello, {this.props.name}</h2>
<h3>You are inside Child Component</h3>
<h3>Your user id is: {this.props.userId}</h3>
</div>
);
}
}
ReactDOM.render(
// passing props
<App />,
document.getElementById("root")
);
export default App;
Output:



CRUD

Popular posts from this blog

Spring boot video streaming example-HTML5

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

DataTable-Pagination example with Spring boot, jQuery and ajax

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Node JS mini projects with source code - free download

Spring boot web project free download:User Registration System

Java - Blowfish Encryption and decryption Example