What is the correct method for transferring and modifying information between a child and parent component in React using Typescript?

edit

There are multiple ways to transfer and modify information between a child and parent component in React using Typescript, but the most common and recommended approach is to pass down props from the parent component to the child component, and then use callbacks to modify the data in the parent component.

Here is an example of how it can be done:

Parent component:

import { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [data, setData] = useState<string>('');

  const handleDataChange = (newData: string) => {
    setData(newData);
  }

  return (
    <div>
      {/* pass down data and handleDataChange as props */}
      <ChildComponent data={data} onDataChange={handleDataChange} />
    </div>
  );
};

export default ParentComponent;

Child component:

interface Props {
  data: string;
  onDataChange: (newData: string) => void;
}

const ChildComponent = ({ data, onDataChange }: Props) => {
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newData = event.target.value;
    onDataChange(newData);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleInputChange} />
    </div>
  );
};

export default ChildComponent;

In this example, the parent component (ParentComponent) has a data state and a handleDataChange function that will update the data state when called. The data state and handleDataChange function are then passed down as props to the child component (ChildComponent).

The child component receives the data and onDataChange props via the Props interface, and uses the onDataChange callback function to update the data state in the parent component whenever the input field changes.

By using this approach, the parent component can control and modify the data passed down to the child component, and the child component can trigger changes in the parent component when needed.