Getting Minified React error #143 on antd dropdown

Question

I am getting Minified error #143 when using antd dropdown with Space. I check and found this error code meaning as React.Children.only expected to receive a single React element child. But I have only one child in space component. below is the error:

Uncaught Error: Minified React error #143; visit https://reactjs.org/docs/error-decoder.html?invariant=143 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Object.only (react.production.min.js:20:474)
    at overlay (dropdown.js:139:34)
    at Dropdown.js:58:24
    at V (Dropdown.js:85:26)
    at d.getComponent (index.js:341:43)
    at d.value (index.js:777:19)
    at La (react-dom.production.min.js:182:192)
    at Da (react-dom.production.min.js:181:224)
    at mc (react-dom.production.min.js:263:490)
    at lu (react-dom.production.min.js:246:265)

Below is my react code:

return (
    <><Space>
        <div className='dropdown-content'>
          <div className='label'>{titles[0]}</div>
            <div>
              <Dropdown
                  menu={menu(clinicalStudies, clinicalStudiesOnClick)}
                  trigger={["click"]}
                >
                  <Button>
                    <Space>
                        select data
                      <DownOutlined className="primary" />
                    </Space>
                  </Button>
              </Dropdown>
            </div>
          </div>
          
          <div className='dropdown-content'>
            <div className='label'>{titles[1]}</div>
            <div>
              <Dropdown
                menu={menu(clinicalStudiesDataSet, datasetObservationOnClick)}
                disabled={disableDropdown}
                trigger={["click"]}
              >
                <Button>
                  <Space>
                    select data2
                    <DownOutlined className="primary"/>
                  </Space>
                </Button>
              </Dropdown>
            </div>
          </div>
</Space></>       
    

Can anyone confirm what I am doing wrong here?

Answer 1

You are displaying two children inside the Space component. You almost got it.

return (
    <Space>
      <React.Fragment>
        <div className='dropdown-content'>
          <div className='label'>{titles[0]}</div>
          <div>
            <Dropdown
              menu={menu(clinicalStudies, clinicalStudiesOnClick)}
              trigger={["click"]}
            >
              <Button>
                <Space>
                  select data
                  <DownOutlined className="primary" />
                </Space>
              </Button>
            </Dropdown>
          </div>
        </div>

        <div className='dropdown-content'>
          <div className='label'>{titles[1]}</div>
          <div>
            <Dropdown
              menu={menu(clinicalStudiesDataSet, datasetObservationOnClick)}
              disabled={disableDropdown}
              trigger={["click"]}
            >
              <Button>
                <Space>
                  select data2
                  <DownOutlined className="primary" />
                </Space>
              </Button>
            </Dropdown>
          </div>
        </div>
      </React.Fragment>
    </Space>
);