Objects are not valid as a React child. If you meant to render a collection of children, use an arra-CodePudding

From what I've been reading, the error is generated by trying to print '{menu.props.options[0]}'. I understand that I can't return it like this since I have to wrap it in an object or array.

The code in question is:

return (
  <Select
    labelInValue
    filterOption={ false }
    showArrow
    suffixIcon={ <SearchOutlined /> }
    onSearch={ debounceFetcher }
    notFoundContent={ fetching ? <Spin size="small" /> : null }
    { ...props }
    className="search-repeated-words"
    dropdownRender={menu => (
      <div>
        {menu.props.options[0]}
        <div style={{ padding: "0 12px", height: 30, lineHeight: "30px", color: "#46C4C1" }} >
           Sugerencias
        </div>
        <Divider style={{ margin: 5 }} />
        {menu}
      </div>
    )}
  >
  {
    options.map((option, index) => (
        <Select.Option key={index} value={option.text}>
          <span>{option.text}</span>
        </Select.Option>
      )
    )
  }
</Select>

What solution can I implement?

The error is generated when I want to print or display {menu.props.options[0]} on the screen. How could I show it?

CodePudding user response：

i guess {menu.props.options[0]} is an object. You should only display the relevant property of this object, with a primitive type (a string, for example) such as menu.props?.options?.[0]?.label

CodePudding user response：

If the error is generated by trying to render

{menu.props.options[0]}

then it means that menu.props.option[0] is an Object type and you should either render it like

<div>{menu.props.options[0].title} {menu.props.options[0].description}</div>

(depending on what properties does the object consist of)

or if you for some reason want to render an object as is:

<div>{ JSON.stringify(menu.props.options[0]) }</div>

CodePudding user response：

Create a helper function (or another component) which can render the option data. Below I've created one labeled OptionCell which is used to both render the first element as well as the the entire option array:

const OptionCell = (option) => (
  <Select.Option key={index} value={option.text}>
    <span>{option.text}</span>
  </Select.Option>
)

return (
  <Select
    labelInValue
    filterOption={ false }
    showArrow
    suffixIcon={ <SearchOutlined /> }
    onSearch={ debounceFetcher }
    notFoundContent={ fetching ? <Spin size="small" /> : null }
    { ...props }
    className="search-repeated-words"
    dropdownRender={menu => (
      <div>
        {<OptionCell options={menu.props.options[0]} />)
        <div style={{ padding: "0 12px", height: 30, lineHeight: "30px", color: "#46C4C1" }} >
           Sugerencias
        </div>
        <Divider style={{ margin: 5 }} />
        {menu}
      </div>
    )}
  >
  {
    options.map((option, index) => (
      <OptionCell options={options} key={index} />
    )
  }
  </Select>
)