I am playing with React Top-Level API to get a feel how it works and I can't get it to clone a component.
I have a UserButton component that should clone Button component but add a text in the beginning.
Live code: https://codesandbox.io/s/react-cloneelement-issue-4j2ur?file=/src/App.js
export default function App() {
return (
<div className="gap-2 flex">
<Button>Login</Button>
{/* Expected to get a button that says:
"Hello! nice to see you Alex"*/}
<UserButton>Alex</UserButton>
</div>
);
}
export function Button({ children, label, className }) {
return (
<div
className={`py-2 px-4 bg-purple-800 hover:bg-purple-900 inline-block rounded text-white cursor-pointer ${className}`}
>
{label} {children}
</div>
);
}
export function UserButton() {
// React.cloneElement not working
return React.cloneElement(Button, {
label: "Hello! nice to see you"
});
}
The error I am getting:
Error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.