Is it possible to set a name for children in react for better code readability?
I want something like this:
default function LinksBar({ links = children }) {
return (
<div>
{links} {/* instead of {children} */}
</div>
)
};
I know I can pass them in props, but I don't want to do it this way (just because of personal preference).
<LinksBar links={<><Link href="1" /><Link href="2" /><>} />
<LinksBar>
<Link href="1" />
<Link href="2" />
<LinksBar/>
You can alias it, although React speaking, it's less readable, in my opinion:
function LinksBar({ children: links })
function LinksBar({ links = children }) defines a parameter destructuring default, not destructuring renaming; it expects a links property and, if it's not found or has the value undefined, tries to default it to a children in-scope variable (presumably failing because there isn't one).
For renaming destructuring syntax, you want {children: links} instead:
default function LinksBar({children: links}) {
return (
<div>
{links}
</div>
)
}