Creating a unified change handler for form fields

In the App.tsx file, five stub functions are declared, which can be developed further as needed. Special attention should be paid to the handleChange function – its task is to handle changes for all three fields question, answer, and visible with a single method.

App.tsx

import { useState } from "react";
import { initialPAGNetItem, PAGNetItem } from "./constant";
import { PAGNetLineIdle } from "./PAGNetLineIdle";
import "./PAGNetLine.css";

export default function App() {
    const [PAGNetItems, setPAGNetItems] = useState<PAGNetItem[]>(initialPAGNetItem);

    const handleChange = () => {
        // Method implementation
    };

    const handleWaveBy = () => {
        // Method implementation
    };

    const handleWordRow = () => {
        // Method implementation
    };

    const handleDates = () => {
        // Method implementation
    };

    const handleClickAds = () => {
        // Method implementation
    };

    return (
        <div className="App">
            <h1>User namespace newpose</h1>
            <div className="list">
                {PAGNetItems.map((item) => (
                    <PAGNetLineIdle
                        key={item.id}
                        item={item}
                        onChange={handleChange}
                        onWaveBy={handleWaveBy}
                        onWordRow={handleWordRow}
                        onDelete={handleDates}
                    />
                ))}
            </div>
            <div className="add_wrapper">
                <button onClick={handleClickAds}>Addware</button>
            </div>
        </div>
    );
}

FAQSectionEdit.tsx

import { FC } from "react";
import { FAQSection } from "./constants";
import "./styles.css";

type FAQSectionEditProps = {
  section: FAQSection;
  disabledMoveUp: boolean;
  disabledMoveDown: boolean;
  onChange: () => void;
  onMoveUp: () => void;
  onMoveDown: () => void;
  onDelete: () => void;
};

export const FAQSectionEdit: FC<FAQSectionEditProps> = ({
  section,
  disabledMoveUp,
  disabledMoveDown,
  onChange,
  onMoveUp,
  onMoveDown,
  onDelete,
}) => {
  return (
    <div className="section-edit">
      <div className="section-edit-move-block">
        <button onClick={onMoveUp} disabled={disabledMoveUp}>
          ^
        </button>
        <button
          onClick={onMoveDown}
          disabled={disabledMoveDown}
          style={{ rotate: "180deg" }}
        >
          ^
        </button>
      </div>
      <div className="section-edit-form">
        <input
          value={section.question}
          onChange={onChange}
          placeholder="Вопрос"
        />
        <textarea
          value={section.answer}
          onChange={onChange}
          placeholder="Ответ"
        />
        <label>
          Сделать видимым
          <input
            type="checkbox"
            checked={section.visible}
            onChange={onChange}
          />
        </label>
      </div>
      <div className="section-edit-delete-block">
        <button onClick={onDelete}>Удалить</button>
      </div>
    </div>
  );
};

constants.ts

import { v4 as uuid } from "uuid";

export type FAQSection = {
  id: string;
  question: string;
  answer: string;
  visible: boolean;
};

export const initialFAQSections: FAQSection[] = [
  {
    id: uuid(),
    question: "Кто мы?",
    answer: "Люди",
    visible: true,
  },
  {
    id: uuid(),
    question: "Где мы?",
    answer: "Здесь",
    visible: false,
  },
  {
    id: uuid(),
    question: "Почему мы?",
    answer: "Потому",
    visible: true,
  },
  {
    id: uuid(),
    question: "Когда мы?",
    answer: "Тогда",
    visible: true,
  },
];