Multiple Types to Store Values in Reactjs State Object

Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Multiple Types to Store Values in Reactjs State Object.

For react js new comers, please check the below link:
React js Basic Tutorials

Friends now I proceed onwards and here is the working code snippet for Multiple Types to Store Values in Reactjs State Object and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

Guys you can skip this first step if you already have reactjs fresh setup:

npx create-react-app reactstate

cd reactstate

npm start // run the project

2. Now friends, we need to run below commands into our reactjs project to install bootstrap(for good looks) module:

Guys you can skip this first step if you already have these modules:

npm install bootstrap --save

npm start

3. Now friends we need to add below code into our src/App.js file to get final output on web browser:

Guys here is the example with state object inside constructor method:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component
{
  //Specify the state object in the constructor method:
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render()
  {
    return (
      <div>
        <div class="jumbotron text-center">
          <h1>Therichpost Tutorial</h1>      
          
        </div>
        <div className="container">
          <div className="row">
            <div className="col-sm-12">
                
                <p>Brand is = <b>{this.state.brand}</b></p>
            </div>
            
          </div>
        </div>
      </div>  
) } }
 export default App;

4. Friends we need to add below code into our src/App.js file to get final output on web browser:

Guys here is the example with state object without constructor method:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component
{

  //Specify the state object without constructor method:
  state = { brandname: "G Wagon" };
  render()
  {
    return (
      <div>
        <div class="jumbotron text-center">
          <h1>Therichpost Tutorial</h1>      
         
        </div>
        <div className="container">
          <div className="row">
            
            <div className="col-sm-12">
             
              <p>Brand is = <b>{this.state.brandname}</b></p>
            </div>
          </div>
        </div>
      </div>  
) } }
 export default App;

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks