CODEWITHSUNDEEP
javascriptarraysreactjsobjectrender
Tomas Valentin
Tomas Valentin

Reputation: 23

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead. How to return it?

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?

menu.props.options[0] = object : enter image description here

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

Upvotes: 1

Views: 540

Answers (3)

Asleepace
Asleepace

Reputation: 3745

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>
)

Upvotes: 0

Aifos Si Prahs
Aifos Si Prahs

Reputation: 363

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>

Upvotes: 0

LIIT
LIIT

Reputation: 604

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

Upvotes: 1

Related Questions