ReactJS | State vs props

We know that in react components are the building blocks which can be reused again and again in building the UI. Before jumping into the main difference between the state and props, let’s see how a component in react is related to a normal function in javascript
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// simple component 
class FakeComponent extends React.component{
 render(){
    return <div>Hello World!</div>
    }
}
// simple javascript function
const FakeFunction = () => console.log('Hello World!');

chevron_right


In the above code we declared a simple react component by extending the React.component native method and then we simply render a div which contains ‘Hello World’ inside it as text. After the function we have a simple javascript function inside it which contains a simple console.log which does the same thing inside it, printing ‘Hello World!’.
So now we know that a React component works similar to a normal javascript function. Let’s take a look at state

State

A state is a variable which exists inside a component, that cannot be accessed and modified outside the component and can only be used inside the component. Works very similarly to a variable that is declared inside a function that cannot be accessed outside the scope of the function in normal javascript. Let’s see with the help an example:
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// component 
class FakeComponent extends React.component{
  state = {
      name : 'Mukul';
   }
  render(){
      return <div>Hello {this.state.name}</div>
   }
// simple js function
const FakeFunction = () => {
  let name = 'Mukul';
  console.log(`Hey ${name}`);
}

chevron_right


In the above code we simply declare a name property inside a component and used it while rendering, similar is the case with a normal function in javascript. It should also be noted that the state is mutable in nature, and should not be accessed from child components.

Props

We know that components in React are used again and again in the UI, but we don’t normally render the same component with the same data. Sometimes we need to change the content inside a component. Props come to play in these cases, as they are passed into the component and the user. Let’s see how they work:
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// component 
class FakeComponent extends React.component{
 render(){
    return <div>Hello {this.props.name}</div>
    }
}
// passing the props
<FakeComponent name='Mukul' />
<FakeComponent name='Mayank' />

chevron_right


A simple component and then we passes the props as attributes and then access them inside our component using this.props. So props makes components reusable by giving components the ability to receive data from the parent component in the form of props. They are immutable.



My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.