I'm new to programing and I don't know what's the best approach here. I made a StudentCard and I have the mapping in this component like this:
<ul className="-my-5 divide-y divide-slate-200">
{props.binderMemberships.map((binderMembership) => (
<li key={binderMembership.id} className="py-4">
<div className="flex items-center space-x-4">
<div className="flex-shrink-0">
<Avatar of={binderMembership.binder.student} size="8" />
</div>
</div>
</li>
</ul>
Now I want the Avatar be separate from this, so I made another child component such as:
import Avatar from "./Avatar"
import type { Binder, BinderMember, User } from "@prisma/client"
export interface AvatarLoaderProps {
binderMemberships: (BinderMember & { binder: Binder & { student: User } })[]
user: User
}
export function AvatarLoader(props: AvatarLoaderProps) {
return (
<div className="flex-shrink-0">
<Avatar of={props.binderMemberships.binder.student} size="8" />
</div>
)
}
Here is my issue: I need to pass the binderMembership that is given to me by mapping in the parent component but I need it in the child component. how can I pass it as a props since it's just an item of items and is just a name?
First of all, you forgot to close the tags of mapping. After </li> it should have )}.
Second, you can pass props to nested components or put it higher, which is simple to do. You want to pass to nested, so it must declare this in your component. I don't know if you have a class/functional component, a classic function or an arrow. But it should look like this:
function NameOfFunction ({ol}) { }
I dispatched props because it is easier to use it.
Third is to use the value somewhere you want using handlebars {} i.e. {props.id}.
And that's all.