0
302
ViewsObjects 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 :
The error is generated when I want to print or display {menu.props.options[0]} on the screen. How could I show it?
3 answers
Answer question0
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
0
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>
0
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>
)