пытаясь использовать функцию, которая возвращает компонент кнопки, но ничего не отображается

Question

Я пытаюсь использовать функцию, которая возвращает компонент кнопки, но при вызове этой функции компонент кнопки не отображается. Все отображается, кроме этой функции. У меня нет ошибок, нет предупреждений, и я попытался отделить эту функцию в отдельный файл, но по-прежнему не отображается для этой функции. Я использую реагировать bootstrap. функция, которую я пытаюсь вызвать, является activeProcessingBtn

const activeProcessingBtn = () => {
  return (
    <div>
      <Button variant="primary" disabled>
        <Spinner
          as="span"
          animation="grow"
          size="sm"
          role="status"
          aria-hidden="true"
        />
        processing...
      </Button>
    </div>
  );
};
function Machines() {
  const [machineInfo, setMachineInfo] = useState({
    id: 0,
    name: "Choose Machine"
  });
  const [isProcessing, setIsProcessing] = useState(true);

  const Machiness = [
    { id: 1, name: "Machine1" },
    { id: 2, name: "Machine2" },
    { id: 3, name: "Machine3" }
  ];

  const selectHandler = (NewName, NewID) => {
    setMachineInfo({ id: NewID, name: NewName });
  };

  const AddMachinesToDropDownItem = Machiness.map(({ id, name }) => {
    return (
      <Dropdown.Item
        eventKey={id}
        value={name}
        className="DropdownItem"
        onClick={() => selectHandler(name, id)}
      >
        {name}
      </Dropdown.Item>
    );
  });


  return (
    <div>
      <h6> Get attendance Manually </h6>
      <DropdownButton id="DropDownMenu" title={machineInfo.name}>
        {AddMachinesToDropDownItem}
      </DropdownButton>

      <activeProcessingBtn />

    </div>
  );
}

export default Machines;

Answer 1

Вместо того, чтобы рассматривать его как компонент (<activeProcessingBtn />), вызывайте его как функцию.

return (
  <div>
    <h6> Get attendance Manually </h6>
    <DropdownButton id="DropDownMenu" title={machineInfo.name}>
      {AddMachinesToDropDownItem}
    </DropdownButton>

    // See here
    {activeProcessingBtn()}

  </div>
);

Answer 2

Все имена компонентов должны начинаться с заглавной буквы. Это то, что React использует, чтобы выяснить, следует ли ему считать элемент собственным элементом HTML и передать его в браузер или дополнительно решить, что он отображает. Поэтому лучшим вариантом будет переименовать функцию на ActiveProcessingBtn или ActiveProcessingButton.