How to Use Variables within Classes
Introduction
Variables store data in terms of values that may or may not be modified into the current context. They can be declared using the various data types available depending on the programming or scripting language.
In this guide, we will learn how to declare and work with various types of variables within classes, including the this keyword, static, props, and state variables.
Using the This Keyword
The scope of a variable may be different based on the situation, but the this keyword typically references a JavaScript element depending on the different scope or context where it’s being used.
For example, if you console the keyword this into the global scope, then you will be able to get the empty object.
1console.log(this);But if you want to use inbuilt JavaScript functionalities or browser-based functionalities, then the window object can be used.
1window.alert("this is test alert")The same applies to a function using the global scope.
1const thisFunction = function () {
2 return "Hello World";
3}
4let msg = thisFunction()
5console.log(msg)In React component classes, the methods that will refer to class attributes, such as props and state, can be defined into the current context. However, for the methods of the components, you have access to this.state and this.props, and you need to bind the React component for this context to those
methods.
For example, say you have one form with the submit method.
1import React, { Component } from "react";
2import { render } from "react-dom";
3
4class App extends Component {
5
6 constructor() {
7 super();
8 this.state = {
9 name: "React",
10 };
11 // Binding method
12 this.onFormSubmit = this.onFormSubmit.bind(this);
13 }
14
15 onFormSubmit() {
16 console.log("Form Submitted");
17 }
18
19 render() {
20 return (
21 <div>
22 <div>
23 <form>
24 <input type="text" />
25 <button onClick={this.onFormSubmit}>Submit</button>
26 </form>
27 </div>
28 </div>
29 );
30 }
31}
32
33render(<App />, document.getElementById("root"));Here in this example, the component has one method called onFormSubmit(), but notice the constructor of the class. The method is bound to the current context with the use of the ‘this’ keyword.
Binding the this keyword to the class method enables you to access the props and state for the component with this.props and this.state.
So when you try to access any props after binding, use the props value as given in the example below.
1onFormSubmit() {
2 console.log(this.props.formValues);
3 }Using Static as the Variable Type
Static variables can be used within React classes, just like other different kinds of variables can access it. Still, the difference is that the scope of the variables can be modified for static variables, and it cannot be modified.
For example, if you use a static or fixed value, it can be declared and used.
1import React, { Component } from "react";
2import { render } from "react-dom";
3
4class App extends Component {
5 // Declaring static variable
6 static num1 = 3.1416;
7
8 constructor() {
9 super();
10 }
11
12 render() {
13 return (
14 <div>
15 <div>Accessing local static number variable : {this.num1}</div>
16 </div>
17 );
18 }
19}
20
21render(<App />, document.getElementById("root"));In the above example, there is one static variable called num1 whose value is fixed. This means no one can change its value into the current component, but they can use it for the rendering purpose.
In the same way, the state object can also be used as a static value.
1import React, { Component } from "react";
2import { render } from "react-dom";
3
4class App extends Component {
5
6 state = {
7 name: 'Hello World',
8 age: '30'
9 };
10
11 render() {
12 const { name, age } = this.state;
13 console.log(this.state)
14 return (
15 <div>
16 </div>
17 );
18 }
19}
20
21render(<App />, document.getElementById("root"));In the above example, the state object will be static, and this means we can pass it to the child component and it will act as a constant value.
Using State Variables
State is one of the widely used terms in React. It is used to manage the component-based data transmission where you can declare the key-value pair and modify it based on the functional requirements.
The state can be declared into the constructor or as a static object.
1constructor() {
2 super();
3 this.state = {
4 name: "React",
5 students: [
6 {
7 id: 123,
8 name: "Student 1"
9 },
10 {
11 id: 456,
12 name: "Student 2"
13 },
14 {
15 id: 789,
16 name: "Student 3"
17 }
18 ]
19 };
20 }In this example, the state variable is created, called students, and consists of an array of objects and can be accessed like this.:
1render() {
2 // Using state value
3 const { students } = this.state;
4 return (
5 <div>
6 // using state value for rendering
7 </div>
8 );
9 }As you can see, the state value can be accessed through this.state, which is bound to the current class context by using the this keyword.
Assigning Props Values to the Variables
Props are read-only properties, or the instance of the properties for the class, and they are one way to pass data from a parent component to a child component.
Commonly, the props as a variable are used to pass dynamic or processed data to a child component so the child component can consume and process it.
For example, there is one array of objects in the parent component, as explained below in the example.
1constructor() {
2 super();
3 this.state = {
4 name: "React",
5 students: [
6 {
7 id: 123,
8 name: "Student 1"
9 },
10 {
11 id: 456,
12 name: "Student 2"
13 },
14 {
15 id: 789,
16 name: "Student 3"
17 }
18 ]
19 };
20 }Now you can pass the state variable, students, to the child component.
1import React, { Component } from "react";
2import { render } from "react-dom";
3import Demo1 from './Demo';
4
5class App extends Component {
6
7 constructor() {
8 super();
9 this.state = {
10 students: [
11 {
12 id: 123,
13 name: "Student 1"
14 },
15 {
16 id: 456,
17 name: "Student 2"
18 },
19 {
20 id: 789,
21 name: "Student 3"
22 }
23 ]
24 };
25 }
26
27 render() {
28 return (
29 <div>
30 <Demo1
31 students={this.state.students}
32 />
33 </div>
34 );
35 }
36}
37
38render(<App />, document.getElementById("root"));In this example, Demo1 is one of the child components. Along with the child component, the additional property is going to be passed students, and from the child component, you can access the props value like this:
1import React, { Component } from "react";
2
3class Demo1 extends Component {
4
5 constructor() {
6 super();
7 this.state = {
8 name: "React",
9 };
10 }
11
12 render() {
13 const { students } = this.props;
14
15 return (
16 <div>
17 {
18 students.map((item) => {
19 return (
20 <div>Student name is : {item.name}</div>
21 )
22 })
23 }
24 </div>
25 );
26 }
27}
28
29export default Demo1As you can see in the above example, there is one additional property called students coming from the parent component. Into the render method, the map is implemented to iterate through the array of objects.
This is one of the standard ways to pass data from a parent component to a child component as a form of props.
Const as a Variable
The variable const is one of the primary options to store static data or values for a specific reason. In most cases, the const value won’t be used for modification.
You can declare and use the const variable as explained below.
1render() {
2 const { students } = this.props;
3 const PI = 3.1416;
4 PI = 45.45;
5 return (
6 <div>
7 <p>Value of PI is : {PI}</p>
8 </div>
9 );
10 }As you can see, The PI variable Is being modified. This means you can modify the const variable and transform it based on your functional requirements.
The better way to use const in React is to store the state or props value like this:
1const { students } = this.props;
2const { name, age } = this.state;Conclusion
In this guide, you learned how to declare and use variables such as local, global, static, state, and props as a variable.
Developers can adopt various options to store data for rendering into a React component. I hope this guide was helpful to you. Thanks for reading.
Learn More
Explore these JavaScript courses from Pluralsight to continue learning: