State vs Props in React

State

• The state is a built-in React object / that is used to contain data or information /about the component
• State is Mutable (changeable)

import React, { useState } from "react";

const App = () => {
  // here defined name as a state variable
  const [name, setName] = useState('Manikandan');
  return <h2>Hi, I am {name}. </h2>
}

export default App;

Props

• Props allow you to pass data / from one component to other components / as an argument.
• Props are immutable (not changeable)

import React, { useState } from "react";

const App = () => {
  const [name, setName] = useState('Manikandan');
  // here pass the (name state) to the Display component as props
  return <Display name={name} />
}

const Display = (props) => {
  // Here receive the name as props
  // we can use (props) or ({name})
  return <h2>Hi, I am {props.name}. </h2>
}

export default App;