Error when overriding: Objects are not valid as a React child

[warm_swallow]

Why does the errror Objects are not valid as a React child (found: object with keys {render})come up when attempting to override elements? (It works though if I actually directly define a component without using the render override object)

[zonal_mammal]

Hi Jay,
Is it possible to look into the code snippet?

[warm_swallow]

// This is a skeleton starter React component generated by Plasmic.
// This file is owned by you, feel free to edit as you see fit.
import * as React from "react";
import { Children } from "react";
import {
  PlasmicDtFooter,
  DefaultDtFooterProps
} from "./plasmic/david_tendai_plasmic/PlasmicDtFooter";
import { HTMLElementRefOf } from "@plasmicapp/react-web";
import { Controller, useForm } from "react-hook-form";
import TextInput from "./TextInput";


export interface DtFooterProps extends DefaultDtFooterProps {}

function DtFooter_(props: DtFooterProps, ref: HTMLElementRefOf<"div">) {
  return <PlasmicDtFooter {...props} root={{ ref }} eEmailInput={{ render: (props, Component) => { return <Component {...props}/>}}} />;
}

const DtFooter = React.forwardRef(DtFooter_);
export default DtFooter;

[warm_swallow]

Hope this helps

[warm_swallow]

@yang can you help?

[yang]

If that is the only change, then I would expect us to still work…

@samuel do you have any ideas here?

[samuel]

The issue is that you’re trying to override props of a slot. For a slot, you should just pass a react component.

In this case, you don’t need slots. You can just use the named component and override it as you’re currently doing it.

[warm_swallow]

Thanks, I think I created the slots because I initially couldn’t see that the named parts of the component were showing up. I’ve stripped them out and everything is back to normal