React : Props and State (Bite-size article)
Tags: react, beginners
Published: 2023-08-27 06:58:06

#Intro

Hello guys! In this article, I will write about **Props** and **State** in React. 

Props and State are the most basic content in React, and I would like to summarize them for my own understanding here. But also I hope this article will help peope who wants to learn, too!

#Basic Concept

React's Props and State are closely related in the data management of React components. However, each has a different role and purpose.

##Props
**Props** is a mechanism for passing data from a parent component to a child component. It is <u>read-only and cannot be modified within the child component</u>. It is primarily used to configure and initialize components.

For example, we have the following component:

```jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
```
By passing a Props named name to this `Welcome` component, you can display greeting messages for different names.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myberwqyyp7o0ockzgsc.png)



##State
**State** is variable data managed inside the component. State is used by the component to <u>change its behavior or state</u>. Changing State causes the component to redraw and the UI to update.

For example, check out the following counter component

```jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;
```
By this example code, State called `count` is managed. When the button is clicked, the `count` is increased and the UI is updated.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbqqxe9xwyxgm8fx40us.png)


#Case Study

Props and State have different purposes and mechanisms, as described above. However, Props and State can be closely related as key elements for React components to pass and dynamically change data.

Here is the actual code example to understand relationship between Props and State.

```jsx

// Child Component : Display user name
function UserName(props) {
  return <p>Hello, {props.name}!</p>;
}

// Parent Component : Manage user name and count
function ParentComponent() {
  const [count, setCount] = useState(0);
  const userName = 'John'; // example username

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <UserName name={userName} />
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  );
}

export default ParentComponent;

```

In this example, the parent component, `ParentComponent`, manages the `username` and `count`. It uses the State of the `count` by the `useState` hook and updates the State by defining the `incrementCount` function. The `UserName` component is responsible only for receiving a user name using Props and displaying that name.

- The parent component passes the data named `userName` to the `UserName` component as **Props**. This allows the child component to display the received name.

- The parent component manages a **State** called `count`, which is also displayed in the child component. The UI is updated according to changes in State by increasing count with each click.

In this way, the parent component passes data to the child component as Props, while simultaneously managing its own internal state as State. The child component uses Props to display the received data and expresses dynamic changes in response to actions (such as click events) provided by the parent component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0901kqftzhrwwvj75vq.png)

For the sake of clarity, I have put the code in one place, in this example. But in actual projects, pages and components are likely to be managed separately. Make sure you know where everything is located and pass data appropriately.

#Outro

Thank you for reading! Happy coding :)