CSFundamental
Published in

CSFundamental

Day 7: States in React

Lesson on States to React and how to alter the state of the program

Before we start states, we need to know what is Class Components in React. As in functional components used functions to create our components, in the class components, we will use classes.

Example 1:

class Helo extends Component {
render () {
return <p>its a component</p>
}
}

these are ES6 classes. To convert a functional component into a class-based, you need to make these changes.

line 1: First, put keyword class in front of your component name, and then it will extend the Component class in the react.

line 2: put the render method.

line 3: return will print the HTML tag, in our case it is “it is a component”

now let’s see what state is and how to use inside of react.

States

we use states because the state of our program might change because for many reasons, maybe there is some user input that wants to change something in the program, or the status of our component might change with time or for any other reason. We can not do those changes with props, hence we will use states.

Like our previous Welcome example, we can write our code and will change the state of our program.

welcome.js

import React, {Component} from 'react';class Welcome extends Component { //line 1constructor() { super()  this.state = {      //line 2  message: 'welcome to React ' //line 3}}differentText(){    //line 4this.setState({message:'thank you for clicking!!'})}render() {  return (    <div>       <p> {this.state.message}</p>      //line 5       <button onClick={()=>this.differentText()} > //line 6
Click Me</button>
</div>)}}export default Welcome

line 1: we are creating a class component.

line 2: inside the constructor, we are using the super method to change the state of our component ( as we are extending our Component class, we need to use the super method).

line 3: the message stores the value.

line 4: the differentText method is defined. We will later call this method and print the new message value after we press the button.

line 5: this.state.message will print the value we have initially stored in line 3.

line 6: we put an event listener in our button and it will call the differentText method.

App.js

import './App.css';import React from 'react';import Welcome from './components/welcome';function App() {return (<div className="App"><Welcome /></div>);}export default App;
before we click on Click Me
after we click on Click Me

That’s all for this lesson. Feel free to comment if anything is not clear.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store