React States - Day Six

Introduction

In the sixth part of my React article series, we are going to learn what is State and how to use it in the React Component. Before moving to components, please read my previous articles.

• React Introduction – Day One
• React Environment Setup – Day Two
• React Fundamentals – Day Three
• Creating And Using React Components – Day Four
• React JSX and Props – Day Five

State

In React, each component has a state. A state is an object with values. It determines a component's rendering and behavior. It is used when a component needs to change independently of its parent. Components with the state have more complexity.

Note - Image Source Google

Defining the state in React component.

Accessing a state via the state property and supplied as attribute.

As in the above screenshot, we have to pass the props as the attributes in elements, i.e., ‘articleName’.

Following are the steps to use States in React Component

1. Create a React application using ‘create-react-app app-name’.
2. After creating the application, open the src/App.js file. Paste the following code in that file.
   
   1. import React, { Component } from 'react';
   2. import logo from './logo.svg';
   3. import './App.css';
   5. class App extends Component {
   6. constructor(props) {
   7. super(props);
   8. this.state = {
   9. articleName: "What is Props in React?"
   10. };
   11. this.handleClick = this.handleClick.bind(this);
   12. }
   13. handleClick(){
   14. this.setState({
   15. articleName: "What is State in React?"
   16. });
   17. }
   18. render() {
   19. return (
   20. <div className="App">
   21. <header className="App-header">
   22. <img src={logo} className="App-logo" alt="logo" />
   23. <h1 className="App-title">Welcome to C# Corner</h1>
   24. </header>
   25. <Article articleName={this.state.articleName}/>
   26. <Author authorName="Jeetendra"/>
   27. <button onClick={this.handleClick}> Click to Change State </button>
   28. </div>
   29. );
   30. }
   31. }
   33. const Article = (props) =>{
   34. return(
   35. <h1 className="App-intro">{props.articleName}</h1>
   36. );
   37. }
   39. class Author extends React.Component {
   40. render(){
   41. return(
   42. <h1 className="App-intro">By {this.props.authorName}</h1>
   43. );
   44. }
   45. }
   47. export default App;