I'm trying to add a aria-current condition in React just if my path variable is null.
{props.path.map((values, index) => {
const path = values.path ? `/${values.path}` : null;
const aria = path !== null ? `aria-current="page"` : null;
return (
<li
className="breadcrumb-item"
{...aria}
>
{path ? <a href={path}>{values.name}</a> : values.name}
</li>
);
})}
It is not working. Any idea how should I do it?
Strings can be spread since they are iterable, but null is not. Spreading a string doesn't make sense here though, you want to spread in a prop.
Create a prop object that can be spread into the element.
{props.path.map((values, index) => {
const path = values.path ? `/${values.path}` : null;
const aria = path !== null ? { "aria-current": "page" } : {};
return (
<li className="breadcrumb-item" {...aria}>
{path ? <a href={path}>{values.name}</a> : values.name}
</li>
);
})}
"aria-current" and not ariaCurrent?Note that all aria-* HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML:
<input type="text" aria-label={labelText} aria-required="true" onChange={onchangeHandler} value={inputValue} name="name" />
ariaCurrent in camel case as React likes it?
{/* @ts-expect-error valid aria attribute */} before the element on which you're spreading the aria attribute (at least this was the case in my Next.js app on the Link component)