Compound Components + React Context → передача formEntity через провайдер в Form и потребление в FormItem.

Условие

Compound Components + React Context → передача formEntity через провайдер в Form и потребление в FormItem. Form оборачивает children в FormContext.Provider, а FormItem использует cloneElement для инъекции value и onChange в Input.

Подводный камень: следи за тем, чтобы FormItem передавал name в хендлер обновления.

const Form = ({ children, formEntity }) => (
  <FormContext.Provider value={formEntity}>{children}</FormContext.Provider>
);

const FormItem = ({ name, children }) => {
  const { state, handlers } = useContext(FormContext);
  return React.cloneElement(children, {
    value: state[name],
    onChange: (e) => handlers.updateValues({ name, value: e.target.value }),
  });
};

Ответ

В данном примере используется паттерн Compound Components с React Context для управления состоянием формы.

• Компонент Form создаёт контекст FormContext и передаёт в него объект formEntity, содержащий состояние формы и методы обновления.
• FormItem получает из контекста состояние и обработчики, затем с помощью React.cloneElement инъецирует в дочерний элемент (например, <input>) пропсы value и onChange.

Ключевой момент — передача name в обработчик onChange, чтобы обновлять именно нужное поле формы:

onChange: (e) => handlers.updateValues({ name, value: e.target.value })

Без передачи name обновление состояния формы будет некорректным, так как не будет понятно, какое поле изменилось.

Такой подход позволяет централизованно управлять состоянием формы и упрощает работу с вложенными компонентами формы.