JSX中的条件链接

Question

I'm trying to write a way to render links conditionally. I have the following function:

const renderLinkIf = (content, condition, href) => {
  if (condition) {
    return (<Link to={href}>{content}</Link>);
  }
  return (content);
};

With very simple tasks it works:

{ renderLinkIf('test', true, '/dashboard') }

However, I can't figure out how to render more complex contents:

{renderLinkIf(
  <span className={sectionCompleted(30) ? 'completed' : null}>
    {sectionCompleted(30) ? <CheckIcon /> : <HeaderPersonalInfo />}
  </span> Personal Info,
  true,
  '/dashboard',
)}

I just get Syntax Errors.

How can I pass more complex JSX through renderLinkIf to be rendered?

Answer 1

I believe you'd have to wrap the <span> and the text Personal Info in a single element for react. Other than that, I don't see any obvious errors:

{renderLinkIf(
  <span><span className={sectionCompleted(30) ? 'completed' : null}>
    {sectionCompleted(30) ? <CheckIcon /> : <HeaderPersonalInfo />}
  </span> Personal Info</span>,
  true,
  '/dashboard',
)}