I am receiving the following errors
Warning: memo: The first argument must be a component. Instead received: object
Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead.
They happen when I change this component
const Tab = () => onLastTab
? <AccountTab data={data.account} />
: <InfoTab data={data.info} />
To be this component, the only difference is the use of React.memo
const Tab = () => onLastTab
? React.memo(<TabOne data={data.one} />)
: React.memo(<TabTwo data={data.two} />)
Those components wrapped in React.memo are definately just functional components that look like
const TabOne = ({data}) => (
<div>
<div className='d-flex '>
...
</div>
</div>
)
Why would this be happening? What can I do to stop it?
As the error message explains, you need to pass component to the React.memo(), not an object. TabOne
is obviously a component name but you already created an object of that component and passed it through the React.memo().
You need fix your code as follows:
const TabOne = ({data}) => (
<div>
<div className='d-flex '>
...
</div>
</div>
)
export default React.memo(TabOne)
const Tab = () => onLastTab
? <TabOne data={data.one} />
: <TabTwo data={data.two} />