React : Props and State (Bite-size article)

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 read-only and cannot be modified within the child component. It is primarily used to configure and initialize components.

For example, we have the following component:

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.

State

State is variable data managed inside the component. State is used by the component to change its behavior or state. Changing State causes the component to redraw and the UI to update.

For example, check out the following counter component

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.

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.

// 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.

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 :)