two Child Component share control

Two Child Components Share Control

When working with TypeScript, it is common to encounter situations where two child components need to share control or data. This can be achieved in multiple ways depending on the specific requirements of your application. In this blog post, we will explore two solutions to this problem.

Solution 1: Using a Parent Component

One way to share control between two child components is by using a parent component as a mediator. The parent component can hold the shared data and pass it down to the child components as props. The child components can then update the shared data by invoking functions passed down from the parent component.

Here’s an example:

// ParentComponent.tsx
import React, { useState } from "react";
import ChildComponent1 from "./ChildComponent1";
import ChildComponent2 from "./ChildComponent2";

const ParentComponent: React.FC = () => {
  const [sharedData, setSharedData] = useState("");

  const updateSharedData = (newData: string) => {
    setSharedData(newData);
  };

  return (
    

      
      
    
  );
};

export default ParentComponent;

// ChildComponent1.tsx
import React from "react";

interface Props {
  sharedData: string;
  updateSharedData: (newData: string) => void;
}

const ChildComponent1: React.FC = ({ sharedData, updateSharedData }) => {
  const handleChange = (event: React.ChangeEvent) => {
    updateSharedData(event.target.value);
  };

  return (
    

      
    
  );
};

export default ChildComponent1;

// ChildComponent2.tsx
import React from "react";

interface Props {
  sharedData: string;
  updateSharedData: (newData: string) => void;
}

const ChildComponent2: React.FC = ({ sharedData, updateSharedData }) => {
  return (
    

      Shared Data: {sharedData}
       updateSharedData("")}>Clear Shared Data
    
  );
};

export default ChildComponent2;

In this solution, the parent component holds the shared data in its state using the useState hook. It passes the shared data and an update function down to the child components as props. The child components can then update the shared data by invoking the update function.

Solution 2: Using a Shared Service

Another approach to sharing control between two child components is by using a shared service. This involves creating a service class that holds the shared data and provides methods for updating and accessing it. The child components can then use this service to interact with the shared data.

Here’s an example:

// SharedService.ts
class SharedService {
  private sharedData: string = "";

  getSharedData(): string {
    return this.sharedData;
  }

  updateSharedData(newData: string): void {
    this.sharedData = newData;
  }
}

export default SharedService;

// ChildComponent1.tsx
import React from "react";
import SharedService from "./SharedService";

const sharedService = new SharedService();

const ChildComponent1: React.FC = () => {
  const handleChange = (event: React.ChangeEvent) => {
    sharedService.updateSharedData(event.target.value);
  };

  return (
    

      
    
  );
};

export default ChildComponent1;

// ChildComponent2.tsx
import React from "react";
import SharedService from "./SharedService";

const sharedService = new SharedService();

const ChildComponent2: React.FC = () => {
  return (
    

      Shared Data: {sharedService.getSharedData()}
       sharedService.updateSharedData("")}>Clear Shared Data
    
  );
};

export default ChildComponent2;

In this solution, we create a SharedService class that holds the shared data. The child components import this service and use its methods to update and access the shared data. Each child component creates a new instance of the SharedService class, ensuring that they share the same instance and therefore the same shared data.

These are two possible solutions to the problem of sharing control between two child components in TypeScript. Choose the solution that best fits your application’s requirements and coding style.

I hope this blog post helps you in your TypeScript development journey. Happy coding!