I am unsure why I am getting this error:

Uncaught Error: React.Children.only expected to receive a single React element child.

I sense that it is to do with teh conditional rendering of patch or normal view but can't work out how to debug it further. Wondering if anyone can point me in the right direction?

<Content>
<ContentLeftHandSide>
  <ContentTitle slim>
    Open the codeblock
    <span className="ml-5">
      <CodeLinkViewButtons
        hasCodeAccess={true}
      />
    </span>
  </ContentTitle>
  {/* conditionally render the codeNode/reduxNode depending on its type (patched or normal) */}
  <Context.Provider value={persister}>
    {authStatus === "authenticated" && hasCodeAccess && (
      <div>
        {reduxNode && reduxNode.type && reduxNode.type === "code/patch" ? (
          <PatchView
            node={reduxNode as PatchCodeNode}
          />
        ) : (
          <NormalView
            node={codeNode as CodeNode}  
          />
        )}
      </div>
    )}
  </Context.Provider>
  {!(authStatus === "authenticated" && hasCodeAccess) && (
    <div style={{ fontFamily: "Source Sans Pro", color: "black", fontSize: "16pt" }}>
      [...]
    </div>
  )}
</ContentLeftHandSide>
{
  <ContentRightHandSide>
    <ContentTitle slim>
      Activity
      />
    </ContentTitle>
    {authStatus === "authenticated" && hasCodeAccess ? (
      <ShareLogs
        linkShareLogs={linkShareLogs}
        selected
      />
    ) : (
      <>
        [...]
      </>
    )}
  </ContentRightHandSide>
}
</Content>

I'd be grateful for any pointers. Thanks!

CodePudding user response：

it says that a component should recive an element child so it should look like this

<Component>
element
</Component>

and not like this

<Component />

I think it's the ContentTitle

<ContentTitle slim>
 activity
</ContentTitle>                  

CodePudding user response：

Try changing from:

 <ContentTitle slim>
  Activity
  />
</ContentTitle>

to this:

 <ContentTitle slim>
  Activity
</ContentTitle>