Как в форме передать значения schema (проверка в yup) в дочерние компоненты?

Для передачи значения schema в дочерние компоненты React-формы можно использовать два подхода: передача в пропсах и использование контекста.

Передача в пропсах - этот подход основан на передаче значения schema в компонентах-родителях и передаче его через пропсы в дочерние компоненты. В примере ниже показано, как это можно сделать:

// Родительский компонент
import React from 'react';
import { object, string, number } from 'yup';

import ChildComponent from './ChildComponent';

const schema = object().shape({
  name: string().required('Name is required'),
  age: number().positive().integer().required('Age is required'),
});

function ParentComponent() {
  return (
    <div>
      <ChildComponent schema={schema} />
    </div>
  );
}

export default ParentComponent;

// Дочерний компонент
import React from 'react';

function ChildComponent({ schema }) {
  // использование schema в дочернем компоненте
  console.log(schema);

  return <div>ChildComponent</div>;
}

export default ChildComponent;

Использование контекста - этот подход позволяет передавать значения "глобально" через все уровни компонентов без явной передачи в пропсах. В примере ниже показано, как это можно сделать:

// Создание контекста
import { createContext } from 'react';

const SchemaContext = createContext(null);

export default SchemaContext;

// Родительский компонент
import React from 'react';
import { object, string, number } from 'yup';

import ChildComponent from './ChildComponent';
import SchemaContext from './SchemaContext';

const schema = object().shape({
  name: string().required('Name is required'),
  age: number().positive().integer().required('Age is required'),
});

function ParentComponent() {
  return (
    <div>
      <SchemaContext.Provider value={schema}>
        <ChildComponent />
      </SchemaContext.Provider>
    </div>
  );
}

export default ParentComponent;

// Дочерний компонент
import React, { useContext } from 'react';
import SchemaContext from './SchemaContext';

function ChildComponent() {
  // получение значения schema из контекста
  const schema = useContext(SchemaContext);

  // использование schema в дочернем компоненте
  console.log(schema);

  return <div>ChildComponent</div>;
}

export default ChildComponent;

Оба подхода имеют свои особенности, и выбор зависит от ваших потребностей и ограничений проекта.