Destructuring props not working in React JS storybooks

Question

I am missing something here when I destructure my props. I am writing a story book but the issue seems like I am doing something wrong with destructuring.

This is my component

export function WrapTitle ({title,children}) : TitleProps & ChildrenProps){
 return (<>h1>{titles}</h1> {children}</>)
}

So in Stories When I pass like this it's not working

<Wraptitle {...args}><Wraptitle>

How I pass the args is (This is a storybook)

WithTitle.args = {
 title:'The is title'
}

and whenI pass like this its working

<Wraptitle title = {"This is header"}><Wraptitle>

Am I missing anything here

Answer 1

You have to write props.PROPERTY sintax, this will work:

export function WrapTitle (props) : TitleProps & ChildrenProps){
 return (<>h1>{props.title}</h1> {props.children}</>)
}