Props and State with example
Tags: webdev, javascript, programming, beginners
Published: 2024-03-18 03:08:18


In React, `props` and `state` are fundamental concepts used to manage data and pass it between components. Here's an explanation of each along with examples:

##1. Props:

- Props (short for properties) are used for passing data from parent to child components in React.
- Props are read-only and cannot be modified by the child component.
- They are passed as attributes to a component and can be accessed using `this.props` within the component.

Example:

```js
// `ParentComponent.js`
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    return <ChildComponent name="John" age={25} />;
  }
}

export default ParentComponent;

```

```js
// `ChildComponent.js`
import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
      </div>
    );
  }
}

export default ChildComponent;

```
##2. State:

- State is used to manage data within a component.
- It is mutable and can be updated using `this.setState()` method provided by React.
- State is initialized in the constructor of the component and can be accessed using `this.state`.

Example:

```js
import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;


```

In the example above, `ParentComponent` passes name and age as props to `ChildComponent`. In `ChildComponent`, these props are accessed using `this.props.name` and `this.props.age`.

In the Counter component example, count is managed as state using `this.state.count`. The `incrementCount` method updates the count when the button is clicked using `this.setState()`.


[github](https://github.com/04anilr)
[website](https://my-portfolio-two-lemon-36.vercel.app/)


[Array methods in react.js ](https://dev.to/04anilr/how-to-use-array-methods-in-real-project-example-add-new-record-3o82)
[Fragment in react.js](https://dev.to/04anilr/fragment-in-reactjs-example-of-fragment-299a) 
[Conditional rendering in react.js](https://dev.to/04anilr/conditional-rendering-in-react-conditional-rendering-example-in-react-3j46)
[Children component in react.js](https://dev.to/04anilr/methods-of-react-children-component-in-react-4ol7)
[use of Async/Await in react.js](https://dev.to/04anilr/how-to-use-asyncawait-3a3o)
[Array methods in react.js](https://dev.to/04anilr/array-methods-in-reactjs-36jb)
[JSX in react.js](https://dev.to/04anilr/jsx-in-reactjs-3f7o)
[Event Handling in react.js](https://dev.to/04anilr/event-handling-in-react-5hc7)
[Arrow function in react.js](https://dev.to/04anilr/arrow-functions-in-react-4gb2)
[Virtual DOM in react.js](https://dev.to/04anilr/how-to-work-virtual-dom-in-react-dom-1b39)
[React map() in react.js](https://dev.to/04anilr/how-to-create-react-map-24pp)
[How to create dark mode in react.js](https://dev.to/04anilr/how-to-create-dark-mode-in-react-js-2kn2)
[How to use of Props in react.js](https://dev.to/04anilr/props-and-state-with-example-1bl1)
[Class component and Functional component](https://dev.to/04anilr/class-component-functional-component-in-react-k43)
[How to use of Router in react.js](https://dev.to/04anilr/how-to-use-of-router-in-reactreact-router-1163)
[All React hooks explain ](https://dev.to/04anilr/react-hooks-cheat-sheet-2hic)
[CSS box model ](https://dev.to/04anilr/css-box-model-work-2k0a)
[How to make portfolio nav-bar in react.js](https://dev.to/04anilr/how-to-make-nav-bar-for-portfolio-website-365m)