React State and Props

State :

The state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behavior of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component.

The change in state can happen as a response to user action or system-generated events and these changes determine the behavior of the component and how it will render.

State allows us to manage changing data in an application. It's defined as an object where we define key-value pairs specifying various data we want to track in the application.

The state object can store multiple properties and 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.In this we can learn ,how to use state in the components.

Example:

class Greetings extends React.Component {
  state = {
    name: "Santhiya"
  };
  updateName() {
    this.setState({ name: "Vinoth" });
  }
  render() {
      return(
          <div>
              <p>Hi  {this.state.name},Nice to meet you... </p>
          </div>
      )  }}

Props:

The props are a type of object where the value of attributes of a tag is stored. The word “props” implies “properties”, and its working functionality is quite similar to HTML attributes.

Basically, these props components are read-only components. In ReactJS, the data can be passed from one component to another component using these props, similar to how the arguments are passed in a function.

Inside the component, we can add the attributes called props; however, we cannot change or modify props inside the component as they are immutable. In this we can learn, how to pass from one component to another component.

Example:

function App() {  
return (   
 <div className="App">   
   <Hello name="Santhiya" state="Tamilnadu" />
    </div> 
 );
}
export default App;


function Hello(props){ 
   return 
<h1>Hai Nice to meet you! This is {props.name} , from  {props.state}.</h1>
}
export default Hello;

THANK YOU...