I'm working on a Breadcrumb component in React JS that returns Links. When binding the component inside my header I give it an array of items (label for the link, URL and a class for 'active' or 'inactive').
Now, inside the mapping of this data I would like to check whether or not the class is 'inactive', and if that is the case I want to set the 'to' link (to={to}) to an empty string. I have unsuccessfully tried using an if condition around the ≤Link≥ component, does anyone know if this is possible and what the correct syntax is?
const items = [
{to: '/link1', label: 'Step 1', stepClass: 'active'},
{to: '/link2', label: 'Step 2', stepClass: 'inactive'},
];
<Breadcrumb>
{items.map(({to, label, stepClass}) => (
<Link key={to} to={to}>
<div className={`step ${stepClass}`}>{label}</div>
</Link>
))}
</Breadcrumb>
Maybe something like
const items = [
{to: '/link1', label: 'Step 1', stepClass: 'active'},
{to: '/link2', label: 'Step 2', stepClass: 'inactive'},
];
<Breadcrumb>
{items.map(item => (
<Link key={item.to} to={item.stepClass == active ? item.to : ''}>
<div className={`step ${item.stepClass}`}>{label}</div>
</Link>
))}
</Breadcrumb>
You can also use if-else block like this in react and return jsx from if-else block.
const items = [
{to: '/link1', label: 'Step 1', stepClass: 'active'},
{to: '/link2', label: 'Step 2', stepClass: 'inactive'},
];
<Breadcrumb>
{items.map(({to, label, stepClass}) => {
if(stepClass === "inactive")
{
return (
<Link key={to} to={to}>
<div className={`step ${stepClass}`}>{label}</div>
</Link>
);
}
else
{
return (
// code here
);
}
})}
</Breadcrumb>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.