Как передать компонент и значение состояния в React для условного отображения данных на основе выбора пользователя?

Я работаю над проектом на React, где у меня есть два компонента: UserRules (Компонент A) и UserEmail (Компонент B). Мне нужно передать значение переменной состояния selectedVoucherOption из Компонента A в Компонент B, чтобы отобразить конкретные данные в Компоненте B в зависимости от выбранного варианта.

Вот что я делаю:

В UserRules (Компонент A) я добавил Строку A, потому что я хочу передать значение selectedVoucherOption в Компонент B (UserEmail), чтобы условно отобразить данные в зависимости от выбора пользователя.

Компонент A:

function UserRules({ intl, home, dispatch }) {
  const [selectedVoucherOption, setSelectedVoucherOption] = useState(null);

  return (
    <Row>
      <Col xs={12}>
        <Label required>{intl.formatMessage({ ...messages.voucherOptions.header })}</Label>
        <Dropdown
          options={voucherOptions}
          placeholder={intl.formatMessage({ ...messages.voucherOptions.placeholder })}
          onChange={(_evt, obj) => {
            setSelectedVoucherOption(obj);
            UserEmail; // Строка A: Пытаюсь передать значение здесь
          }}
        />
      </Col>
    </Row>
  );
}

Компонент B:

function UserEmail({ intl, onValueChange }) {
  // Логика на основе selectedVoucherOption
  ...
}

Email.propTypes = {
  intl: intlShape.isRequired,
  onValueChange: PropTypes.func.isRequired,
};

Проблема, с которой я сталкиваюсь, заключается в том, как передать состояние selectedVoucherOption из Компонента A в Компонент B (в Строке A) таким образом, чтобы Компонент B мог условно отображать данные на основе этого значения.

Как лучше всего это сделать в React?

Отрисовка компонента происходит в JSX, а не в функции. (Хотя функцию определенно можно использовать для создания JSX, эта функция должна создавать JSX, а не просто ссылаться на функцию компонента, как вы пытаетесь сделать.)

Например:

<Dropdown
  options={voucherOptions}
  placeholder={intl.formatMessage({ ...messages.voucherOptions.placeholder })}
  onChange={(_evt, obj) => {
    setSelectedOption(obj);
  }}
/>
<UserEmail />

Обратите внимание на <UserEmail /> как на отдельный элемент в разметке. Вы можете условно включить его, обернув его в условное выражение. Например:

<Dropdown
  options={voucherOptions}
  placeholder={intl.formatMessage({ ...messages.voucherOptions.placeholder })}
  onChange={(_evt, obj) => {
    setSelectedOption(obj);
  }}
/>
{ someCondition ? <UserEmail /> : null }

Обратите внимание, что выражение JavaScript обернуто в {}, чтобы указать, что это выражение, а не JSX разметка. Какое бы условие вы ни использовали как someCondition, оно определит, будет ли выражение оцениваться как <UserEmail /> или null.

Если вы хотите передать пропс, вы сделаете это точно так же, как пропсы, которые вы уже передаете другим компонентам:

<Dropdown
  options={voucherOptions}
  placeholder={intl.formatMessage({ ...messages.voucherOptions.placeholder })}
  onChange={(_evt, obj) => {
    setSelectedOption(obj);
  }}
/>
{ someCondition ? <UserEmail someProp={selectedVoucherOption} /> : null }

А в компоненте вы будете читать этот пропс:

function UserEmail({ intl, onValueChange, someProp }) {
  // Логика на основе someProp
}

В основном, компонент, который вы пишете, структурно не отличается от сторонних компонентов, которые вы уже используете. Компонент остается компонентом в любом случае. Вы будете включать его в JSX, условно или иначе, и передавать пропсы, как любому другому компоненту.

Я рекомендую вам прочитать документацию React. Так компоненты не используются.

То, что вы хотите, вероятно, выглядит как-то так:

function UserRules({ intl, home, dispatch }) {
  const [selectedVoucherOption, setSelectedVoucherOption] = useState(null);

  return (
    <>
      <Row>
        <Col xs={12}>
          <Label required>{intl.formatMessage({ ...messages.voucherOptions.header })}</Label>
          <Dropdown
            options={voucherOptions}
            placeholder={intl.formatMessage({ ...messages.voucherOptions.placeholder })}
            onChange={(_evt, obj) => {
              setSelectedOption(obj);
            }}
          />
        </Col>
      </Row>
      <UserEmail selectedVoucherOption={selectedVoucherOption} />
    </>
  )

  function UserEmail({ selectedVoucherOption }) {
    return (<span>{selectedVoucherOption}</span>)
  }