DEV Community: Bipin singh

What is state & how to use it in react?

Bipin singh — Sun, 23 Aug 2020 23:30:03 +0000

There are many JavaScript framework and library in JS world and every framework and library has a different way to handle data flow. React has a different way to handle data flow which makes it different compare to other framework and library.

If we want to share data between component, we can use props in react. Which you can learn and understand from my previous post. With props, we can pass data from parent to child component and utilize its value, but we can not alter its value and can not send data back to parent from child component.Because props is a read only object as well as data with props is passed in uni-directional flow.

But sometimes we also want to utilize data within component itself as well as we also want to alter its value. To achieve this dynamic behaviour we can use state in react.

Let's begin to understand what is state and how to use it in react.

What is state

State is a JavaScript object in react which holds dynamic data inside component between different render cycle.
Unlike props this object is private to component.
Before react version 16.8 state can only be used within classes. But after 16.8 we can use state in functional component with useState hook. Hooks is all together is a standalone topic which we will cover in future post. But we will learn how to use useState hook in this post.

Let's understand how to use state in react with a small project(Create a click counter).

Understand state with class based approach.

Let's create a class name App which will extends react component.

Props in the App class is an object which will hold all the attribute data passed to App component.
In class base component props is passed to constructor function.
To utilize props in the component we must need to call super function and should pass props as argument of it.

Define state in constructor which will hold an object with key count and its initial value as 0.

Let's define a render function in class component and whatever render function will return will render inside Dom element

Add a p tag which will hold count variable and wrap count variable with interpolation({}) to render it in Dom. Also add button element which will call increment function on click of button.

Now add increment function inside class and call this.setState function which will increment count variable from its previous value by one.

This is our full code which will increment count value by one and also re render component into Dom every time count value is changed.

Full code can be viewed over here.

Understand state with function based approach.

Note: State can be used in functional component using useState hook.

Let's create a function name App and import react and useState hook from react.

Define useState hook inside component and pass 0 as it's initial value inside useState argument. useState hook will return an array which first value will be initial value of the hook and second value will be function with which we can alter the value of the state variable value returned by useState hook.

Over here we had used destructuring to destructure the returned array value.
You can read more about destructuring over here

Let's return a jsx element from the component and whatever function will return will render inside Dom element

Add a p tag which will hold count variable and wrap count variable with interpolation({}) to render it in Dom. Also add button element which will call increment function on click of button.

Now add increment function inside component and call setCount function which will increment count variable from its previous value by one.

This is our full code which will increment count value by one and also re render component into Dom every time count value is changed.

Full code can be viewed over here.

Conclusion

If we want to update the component we can use state in react.
For this we can take two approach either by using class or by using function.
It's totally depends on us which approach we want to take.

Hope this will be helpful for you.
Keep learning.

What is props & how to use it in React?

Bipin singh — Sun, 16 Aug 2020 18:22:23 +0000

Every javascript framework has a different way of data handling and manipulation. React has a different way to handle and manipulate data flow compare to other javascript frameworks that's why it become's difficult to understand some concept like props, state and so on.

To understand how props works in react, first we have to understand what is component in react and how it works. So i strongly recommend to refer my post How to create simple component in React

What is props?

React is javascript component based library which divides ui in a small reusable pieces. In some cases we need to also pass data between component to communicate with each other.

Props is a special keyword in React, which stands for properties and is being used for passing data from one component to another.

Data with props is passed in uni-direction flow(Parent to Child).

Props data is read only which means its value can not be changed from child component.

Let's see how props work with an example.

Define an attribute and its value.
Pass it to the child component.
Render the props data.

Understand how props works by an example.

First create a parent component

function ParentComponent() {
 return (
  <h1>I am parent component</h1>
  <ChildComponent/>
 );
}

Create a child component

function ChildComponent() {
 return <p>I am child component</p>
}

Let's call a child component multiple times in parent component.

function ParentComponent() {
 return (
  <h1>I am parent component</h1>
  <ChildComponent/>
  <ChildComponent/>
  <ChildComponent/>
  <ChildComponent/>
 );
}

Output of above code will be.

I am parent component
I am child component
I am child component
I am child component
I am child component

But our goal is to print dynamic data in output.

To achieve this we have to pass data from parent component to child using props.

As we learn before props can be passed as an attribute and its value.

As we know how we can define an attribute in an image html tag.
<img src="img-name.jpg">

The same way we can define an attribute and assign a value with interpolation {} in a react component.

<ChildComponent firstAttribute={} secondAttribute={}/>

Let's declare a text attribute and it's value to child component.

<ChildComponent text={I am first child component}/>

The attribute we pass in an component is received as an argument in child component like a javascript function is receiving an argument

 # Javascript function
function multiplication(fistArgument, secondArgument) {
 return fistArgument * secondArgument;
}

In the same way child component is also receiving a props as a argument

function childComponent(props) {

}

Before using props directly first logs it to the console and have a look to its value.

console.log(props)

As we can see props is an javascript object. In javascript we can access object key with doc(.) notation.

Let's render props in child component with an interpolation.

function ChildComponent(props) {
 return <p>{props.text}</p>
}

Also pass props to other child component.

function ParentComponent() {
 return (
  <h1>I am parent component</h1>
  <ChildComponent text={I am a first child component}/>
  <ChildComponent text={I am a second child component}/>
  <ChildComponent text={I am a third child component}/>
  <ChildComponent text={I am a fourth child component}/>
 );
}

Output will be

I am parent component
I am first child component
I am second child component
I am third child component
I am fourth child component

Hope this post will help you understand props in react.
Feel free to left out comment below if you have any question.

Keep learning.

How to create simple component in React

Bipin singh — Sat, 15 Aug 2020 13:38:50 +0000

React is a javascript library which makes it easy to create an awesome ui.

Component is a basic building block of a every react project. Let's understand how we can create a simple hello world component in react.

Component can be created in two ways in react.

Functional component
Class component

Let's first understand how to create a component using class.

Class component

Every react component start with simple import statement.

Import React from react

We have to create a class and have to extends React.component into it.

class HelloWorld extends React.component {

}

Note: First letter of the component in react should be capital letter.

We have to implement render function to render ui into Dom(document object model).

render() {
  return <h1>Hello world</h1>;
}

To render a component in dom we have to import react-dom

import ReactDOM from 'react-dom'

Complete code:

Import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorld extends React.component {
 render() {
  return <h1>Hello world</h1>;
 }
}
ReactDOM.render(<HelloWorld />, document.getElementById("root"));

Functional component

Every react component start with simple import statement.

Import React from react

We have to create a function

function HelloWorld {

}

We have to return from the function to render ui into Dom(document object model).

return <h1>Hello world</h1>;

To render a component in dom we have to import react-dom

import ReactDOM from 'react-dom'

Complete code:

Import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorld {
  return <h1>Hello world</h1>;
}
ReactDOM.render(<HelloWorld />, document.getElementById("root"));

Hope this will be helpful for all of you.
Keep Learning.