I’m working at Minitwitter project,I want to add onClick handler for every entrie in postList. My Feed.tsx is:
import * as React from "react";
import {
PlasmicFeed,
DefaultFeedProps
} from "./plasmic/minitwitter/PlasmicFeed";
import { HTMLElementRefOf } from "@plasmicapp/react-web";
import { useNavigate } from "react-router-dom"
import Post from "./Post";
export interface FeedProps extends DefaultFeedProps { }
function Feed_(props: FeedProps, ref: HTMLElementRefOf<"div">) {
const navigate = useNavigate();
const entries = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
return <PlasmicFeed
root={{ ref }}
button={{
props: { onClick: () => navigate("/newpost") }
}}
{...props}
postList={{
children: entries.map((entry) => (
<Post
root={{
props: {
onClick: () => console.log('I got clicked from', entry)
}
}}
>
{entry}
</Post>
)),
}}
/>;
}
const Feed = React.forwardRef(Feed_);
export default Feed;
When I compile this, it threw the follow error:
ERROR in src/components/Feed.tsx:29:11
TS2322: Type ‘{ children: string; root: { props: { onClick: () => void; }; }; }’ is not assignable
to type ‘IntrinsicAttributes & PostProps & RefAttributes’.
Property ‘root’ does not exist on type ‘IntrinsicAttributes & PostProps & RefAttributes’.
27 | children: entries.map((entry) => (
28 | <Post
29 | root={{
| ^^^^
30 | props: {
31 | onClick: () => console.log(‘I got clicked from’, entry)
32 | }