ReactJS - State and Props


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:



More...

Comments