State vs prop (react)

JavaScript
1

what is the diiference bw state and prop,I can do the same this with prop right ?


class Counter extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
   // change code below this line
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
 this.reset = this.reset.bind(this);
   // change code above this line
 }
 // change code below this line
 increment(){
 this.setState(state =>({
   count : state.count+1 
 }));
 }

 decrement(){
 this.setState(state =>({
   count : state.count-1
 }));
 }

reset(){
 this.setState(state =>({
   count : 0
 }));
 }
 // change code above this line
 render() {
   return (
     <div>
       <button className='inc' onClick={this.increment}>Increment!</button>
       <button className='dec' onClick={this.decrement}>Decrement!</button>
       <button className='reset' onClick={this.reset}>Reset</button>
       <h1>Current Count: {this.state.count}</h1>
     </div>
   );
 }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0.

Challenge: Write a Simple Counter

Link to the challenge:

2

Props are arguments of the functions - what you pass from one component to another. State is internal property of the component. When this property is changed, React will re-render this component. In ownership analogy, component owns state and doesn’t own the props, instead props is something that is given to component:

function a(props) {
  const state = 42;
}
3

In your code, when you create (construct) component you assign a state to it:

this.state = {
  count: 0
};

You never actually use props and therefore your constructor might just look like this:

constructor() {
  super();
  // ....
4

They are both variable but,
Prop are used to pass the data and are read only. They are variables but by it’s parent component.
Where state is used to manage the data and can be altered by it’s own component. The state can be initialized* by props.

Initialized meaning:
set to the value or put in the condition appropriate to the start of an operation.
to set the numbers, amounts, etc. in a computer program so that it is ready to start working
Source: Google