How to pass variants to components?

Developer Support
1

So, I am watching video conference on todoMVC app, I couldn’t figure out how to pass States = “completed” to the Task component
I have data like this:

const [tasks] = useState([
    {name:"Content", variant:"Completed"},
and on return,
children:tasks.map((task)=><Task children={task.name} variants={task.variant} onClick={()=>console.log(task.name)}></Task>)}

on Task component code, I see that it gets a “variants” prop, I thought If I pass “Completed” as variant, It would show the Completed state of the component, but it doesn’t.

My Task component has variants like this on plasmic studio

image.png

Can anyone explain how hasVariant() function works? In Task component, I see this function when checking variant:

hasVariant(variants,"states","completed")

So, I checked the codes in react-web.esm and found the hasVariant function, it looks like it wants an object like this {states:“completed”}

it all should be lowercase btw

2

Plasmic components can have multiple variants and multiple variant groups, so variants can’t just be a single string—try passing in variants={states: "completed"}

3

(You got it!)