React js Class Component

Class Component in React js

January 07, 2022



Components

  • Components are the building blocks of any React app.
  • Components let you split the UI into independent, reusable pieces, and think about each piece in isolation
  • Components are like JavaScript functions.They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
  • Always start component names with a capital letter
  • React treats components starting with lowercase letters as DOM tags. For example, <div/> represents an HTML div tag, but <App /> represents a component requires App to be in scope.

Class Component
A class component requires you to extend from React Component. The class must implement a render() member function which returns a React component to be rendered, similar to a return value of a functional component. In a class-based component, props are accessible via this props.

basic class Component | use RCC trigger
 
  import React, { Component } from 'react'

  export default class App extends Component {
    render() {
      return (
        <div>

        </div>
      )
    }
  }


State In Class Component
State is similar to props, but it is private and fully controlled by the component. We can create state only in class component. It is possible to update the state / Modify the state/.

There are two way to initialize state in React Component ::

  • Directly inside class
  • Inside the Constructor

Directly Inside Class Component, without constructor(); method

   
  import React, { Component } from 'react';

  class App extends Component {
    state = {
      name : 'code guruva',
    }
    render() {
      return (
        <div>
          <h2>{this.state.name}</h2>
        </div>
      );
    }
  }

  export default App;

A State is an object that stores the values of properties belonging to a component that could change over a period of time.
  • A state ca be modified based on the user action or network changes
  • Every time the state of an object changes, React re-renders the the component to the browser
  • The state object is initialized in the constructor
  • The state object can store multiple properties
  • this.setState() is used to change the value of the state object
  • setState() function performs a shallow merge between the new and the previous state.

setState :

state can be updated in responsive to event handlers, server responses or prop changes. This is done using setState method.

setState() method enqueues all the updates made to the component state and instructs React to re-render the component and its children with the updated state.

   
  import React, { Component } from 'react';

  class App extends Component {
    state = {
      name : 'code guruva',
    }
    render() {
      return (
        <div>
          <h2>{this.state.name}</h2>
          <br />
          <button onClick={()=>this.setState({name:'online training'})}>            Change Text</button>
        </div>
      );
    }
  }

  export default App;


setState{}

 
 
  import React, { Component } from 'react'

  export default class App extends Component {
  constructor(props) {
    super(props)

      this.state = {
        sub:"plz subscribe"
      }
    }

    subscribed =()=>{

      this.setState({
        sub: "yes subscribed",
      })


    }


    render() {
      return (
        <div>
          <h2>{this.state.sub}</h2>

          <button onClick={this.subscribed}>
            please subscribe
          </button>

        </div>
      )
    }
  }





assigning CSS to Class Component

 
 import React, { Component } from 'react'

  export default class App extends Component {
    render() {

      const design ={
        color:'white',
        backgroundColor:'gray',
        padding:'10px',
      }

      return (
        <div>
         
          <h2 style={design}>Heading</h2>


        </div>
      )
    }
  }




*Creating Show / Hide  Password in forms
Here you can see how to create Show & Hide Password effect in forms using state with class component.

to create show / hide password effect you have to use data types boolean and operators..

    import React, {Component} from 'react';

  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showPassword: false
      }
    }
    render() {
      return (
        <div>

        <form>
          <input
          type={this.state.showPassword ? "text" : "password"}
          />

          <button
          onClick={()=>this.setState({showPassword:!this.state.showPassword})}
          >
          Show
          </button>
        </form>

        </div>

      );
    }
  }
 
  export default App;

How to create bootstrap, collapse nav in react ??
Here in this example you can find, how to create bootstrap, collapse navigation in react , to assign collapse navigation in react , you have to use ternary operators, and boolean data types, in react js class component.


    import React, { Component } from 'react'
    import './css/Header.css';
    import MenuIcon from '@material-ui/icons/Menu';
    import CloseIcon from '@material-ui/icons/Close';

    export default class Header extends Component {
        constructor(){
            super();
            this.state={
                show: true,
            }
        }
        render() {
            return (
           
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
            <div className="container">
            <a className="navbar-brand text-info" href="#">CODE WITH YD</a>
            <button className="navbar-toggler border border-info text-info"
            onClick={ ()=>{ this.setState({show: !this.state.show}) } } >
            {this.state.show ? <MenuIcon /> : <CloseIcon />}
            </button>
            <div className={this.state.show ? 'collapse navbar-collapse' :
            'collapse navbar-collapse active'}>

            <ul className="navbar-nav ms-auto">
            <li className="nav-item">
                <a className="nav-link text-light" href="#">HOME</a>
            </li>
            <li className="nav-item">
                <a className="nav-link text-light" href="#">SERVICES</a>
            </li>
            <li className="nav-item">
                <a className="nav-link text-light" href="#">ABOUT US</a>
            </li>
            <li className="nav-item">
                <a className="nav-link text-light" href="#">CONTACT US</a>
            </li>
            </ul>
            </div>
            </div>
            </nav>
           
            )
        }
    }


and you have to assign , some custom css to your bootstrap navigation , here you can see the example, here in this custom css you have to assign @media queries also, so that you can get bootstrap responsive collapse navigation.


    nav{
        top:0;
        box-shadow: 0px 13px 24px 0px rgba(0,0,0,0.08);
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
    nav .navbar-collapse.collapse{
        display: block;
    }
    @media (max-width: 991px){
        nav .navbar-collapse.collapse{
            overflow: hidden;
        }
        nav .navbar-collapse.active{
            height: 100vh !important;
        }
    }
    nav .navbar-collapse{
        transition: .6s all ease-in-out;
        height: 0 !important;
    }