ReactJS - Props and State

React is a JavaScript library to reshapes the user interfaces act as a more reactive. It develops the simple views for every state in the application, and React will accurately renovate and deliver the right components when the data is updated. It is most often well defined and interacted with views.

The React tutorial on Techtuts furnishes an explanation from the base to step out conception. This tutorial provides a good understanding about the React JavaScript Library for Technical, Non-Technical People, College Students and Working Professionals. Given an examples are an painless to readable and an easy to practice by yourself.

In this tutorial you will know about the concepts from starting to ending point.This tutorial includes an Introduction, Features, Create and Run ReactJs app, JSX, Components, State and Props, Component Life Cycle, Component Life Cycle methods, Router, Redux, Flux etc.

State and Props

Mainly, in Reactjs we need to understand  two concepts, Which are State and Props. The Props is used to pass value or callback to the component and The State is used to manage the value within the component.

The state

The state is initilized and manged by their component directly. It works within the component. if we want to  update  any values, we must use state. State only interacted with values and component,  On updating the values for the component.

We can import the state to component by import  useState callback from React Library

import React, { useState } from 'react';

Initialize State

const[udatedName,setUpdatedName] =useState('');

Update the value on state

 setUpdatedName("Jane");   

The props

The props is a value likewise html element atteributes. By uisng the props, we can interact with child components.  In ReactJs we must use one parent component. It will be tree and node structure. We cannot pass any values or callback to child components directly. instead of passing directly, we have to use props. The props is one of important concept in ReactJs for achieving Top to Bottom and Bottom to Top approaches

Example:

App.Js

import React, {useState} from 'react';
import './App.css';
import NameForm from './components/Child/NameForm';

function App() {
  const[name, SetName] =useState('Jane');
  const updatedFromChild=(name)=>{
    SetName(name);
  }
  return (
    <div className="App">
      <NameForm onUpdateName = {updatedFromChild} />
      <p>Welcome {name} to Techtuts.in</p>  
    </div>
  );
}

export default App;

NameForm.js

import React, {useState} from 'react';

function NameForm(props){
    const[udatedName,setUpdatedName] =useState('');

    const submitHandler = (event) =>{
        event.preventDefault();
        props.onUpdateName(udatedName);
        setUpdatedName('');   
    }

    const nameChangeHandler = (event) =>{
        let name = event.target.value;
        if(name.trim().length===0){
            return;
        }
        setUpdatedName(name);       
    }
    return (
        <div>
            <form onSubmit={submitHandler}>
                <label>Name to update</label>
                <input type ="text" value={udatedName} onChange={nameChangeHandler}/>
                <button type="submit">Change</button>
            </form>
        </div>
    )

}
export default NameForm;