Understanding the Control Props Pattern in React: A Simple Example

Hello friends, In this post we are going to implement control props pattern is react. When you work on a react project, you might have a use case in which you have to pass the component state and event handlers outside the component. This is exactly the use case which can be solved using control props patten. You can download the example code from react-design-pattern/control-props-example at main · navinprasadofficial/react-design-pattern (github.com)

Definition

The Control Props pattern is a design pattern in React that involves passing both the value and an event handler from the parent component to a child component. By doing so, the parent component maintains control over the child’s state, enabling it to modify or retrieve the child’s value as needed.

Example demonstrating the control props pattern.

Create new Project using below command and add components folder in src directory.

npx create-react-app control-props-example --template typescript

Create a new component file “TextInputBox.tsx” and add below code in it.

import React from "react";

interface TextInputBoxProps {
  value: string;
  onChange: (value: string) => void;
  onClear: () => void;
}

export const TextInputBox: React.FC<TextInputBoxProps> = (
  props: TextInputBoxProps
) => {
  const { value, onChange, onClear } = props;

  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.value);
  };

  const onClearHandler = () => {
    onClear();
  };

  return (
    <div>
      <input type="text" value={value} onChange={onChangeHandler} />
      <button onClick={onClearHandler}>Clear</button>
    </div>
  );
};

export default TextInputBox;

The above code defines a functional component called TextInputBox in TypeScript. It expects three props: value, onChange, and onClear. The value prop represents the current value of the input field, while onChange and onClear are event handlers for input changes and clearing the input, respectively.

Inside the component, an input element is rendered with the value prop bound to its value attribute. The onChange event handler is called when the input value changes, and the onClear event handler is triggered when the “Clear” button is clicked.

Create new component file Parent.tsx and add below code in it.

import React from "react";
import TextInputBox from "./TextInputBox";

const Parent: React.FC = () => {
  const [textInputBoxValue, setTextInputBoxValue] = React.useState<string>("");

  const onTextInputBoxChange = (value: string) => {
    setTextInputBoxValue(value);
  };

  const onTextInputBoxClear = () => {
    setTextInputBoxValue("");
  };

  return (
    <>
      <TextInputBox
        value={textInputBoxValue}
        onChange={onTextInputBoxChange}
        onClear={onTextInputBoxClear}
      />
    </>
  );
};

export default Parent;

The above code showcases a parent component called Parent that utilizes the TextInputBox component. Here’s a summary of the code:

The Parent component is defined as a functional component. It maintains a state variable called textInputBoxValue using the React.useState hook, initialized with an empty string.

Two event handler functions are defined within the Parent component. The onTextInputBoxChange function updates the textInputBoxValue state variable with the new value passed as an argument. The onTextInputBoxClear function sets the textInputBoxValue state variable back to an empty string.

In the component’s return statement, the TextInputBox component is rendered. It receives props: value, onChange, and onClear. The value prop is set to the textInputBoxValue state variable, while the onChange and onClear props are assigned the respective event handler functions defined in the Parent component.

The Parent component is exported as the default export, making it available for use in other files.

Update App.tsx as below.

import React from "react";
import "./App.css";
import Parent from "./components/Parent";

function App() {
  return (
    <div className="App">
      <h2>React Control props Pattern Example</h2>
      <Parent />
    </div>
  );
}

export default App;

The above code renders a <div> element with the class name “App”. Inside this <div>, a heading with the text “React Control props Pattern Example” is displayed. Additionally, the Parent component is rendered

Once rendered you can see below output.

You can try input some text in textbox and click on clear. All should be working for you if you followed above example correctly. You must be observed that the TextInputBox component is not responsible for managing the state and that is passed by the Parent component or we can say consumer component.

Conclusion

The Control Props pattern in React is a powerful technique that allows a parent component to maintain control over the state of its child components. By passing both the value and event handlers from the parent to the child, the parent component can effectively manage and manipulate the child component’s state.

In this blog post, we explored a simple example that demonstrated the implementation of the Control Props pattern. The example consisted of a parent component, <Parent>, and a child component, <TextInputBox>. The parent component controlled the state of the child component’s input value by passing the value prop and event handlers for input changes and clearing.

By adopting the Control Props pattern, developers can achieve greater control and flexibility in managing the state of their React components. This pattern promotes reusability and encapsulation, allowing components to be easily composed and modified.

Remember, while the example provided was straightforward, the Control Props pattern can be applied to various scenarios and can be adapted to suit specific application requirements. By mastering this pattern, developers can build more robust and maintainable React applications.

The post Understanding the Control Props Pattern in React: A Simple Example appeared first on CodeLila.