Передача данных через реквизиты и создание интерактивных компонентов — это фундаментальная концепция React, которая позволяет обмениваться данными между компонентами и создавать динамические пользовательские интерфейсы. Вот несколько методов, которые вы можете использовать, а также примеры кода:

1. Свойство «родитель-потомок».
   В этом методе вы передаете данные из родительского компонента в дочерний компонент с помощью реквизита.

   // ParentComponent.jsx
   import React from 'react';
   import ChildComponent from './ChildComponent';
   const ParentComponent = () => {
    const message = 'Hello, World!';
    return <ChildComponent message={message} />;
   };
   // ChildComponent.jsx
   import React from 'react';
   const ChildComponent = (props) => {
    return <div>{props.message}</div>;
   };
   export default ChildComponent;

2. Обратные вызовы от дочернего к родительскому:
   Этот метод позволяет передавать данные из дочернего компонента в родительский с помощью обратных вызовов.

   // ParentComponent.jsx
   import React from 'react';
   import ChildComponent from './ChildComponent';
   const ParentComponent = () => {
    const handleData = (data) => {
      console.log(data);
    };
    return <ChildComponent onData={handleData} />;
   };
   // ChildComponent.jsx
   import React from 'react';
   const ChildComponent = (props) => {
    const handleClick = () => {
      props.onData('Data from child component');
    };
    return <button onClick={handleClick}>Send Data</button>;
   };
   export default ChildComponent;

3. Context API:
   Context API позволяет обмениваться данными на нескольких уровнях дерева компонентов без явной передачи реквизитов.

   // DataContext.js
   import React from 'react';
   const DataContext = React.createContext();
   export default DataContext;
   // ParentComponent.jsx
   import React from 'react';
   import ChildComponent from './ChildComponent';
   import DataContext from './DataContext';
   const ParentComponent = () => {
    const message = 'Hello, World!';
    return (
      <DataContext.Provider value={message}>
        <ChildComponent />
      </DataContext.Provider>
    );
   };
   // ChildComponent.jsx
   import React, { useContext } from 'react';
   import DataContext from './DataContext';
   const ChildComponent = () => {
    const message = useContext(DataContext);
    return <div>{message}</div>;
   };
   export default ChildComponent;

4. Библиотеки управления состоянием.
   Библиотеки управления состоянием, такие как Redux или MobX, предоставляют централизованное хранилище для управления данными и обмена ими между компонентами.

   // Redux example
   // store.js
   import { createStore } from 'redux';
   const initialState = {
    message: 'Hello, World!',
   };
   const reducer = (state = initialState, action) => {
    switch (action.type) {
      case 'UPDATE_MESSAGE':
        return { ...state, message: action.payload };
      default:
        return state;
    }
   };
   const store = createStore(reducer);
   export default store;
   // ParentComponent.jsx
   import React from 'react';
   import { connect } from 'react-redux';
   const ParentComponent = (props) => {
    const handleUpdateMessage = () => {
      props.dispatch({ type: 'UPDATE_MESSAGE', payload: 'New message' });
    };
    return (
      <div>
        <div>{props.message}</div>
        <button onClick={handleUpdateMessage}>Update Message</button>
      </div>
    );
   };
   const mapStateToProps = (state) => ({
    message: state.message,
   });
   export default connect(mapStateToProps)(ParentComponent);

Это всего лишь несколько методов передачи данных через реквизиты и создания интерактивных компонентов в React. У каждого метода свой вариант использования и своя сложность, поэтому выберите тот, который лучше всего соответствует вашим потребностям.