Nested curly braces causing error with ternary in React

Question

I have the following react functional component:

const EventRow = props => {
  const { key, date, name, ticketLink, location } = props;

  return (
    <tr key={key}>
      <td> {date} </td>
      <td className="events-italic">
        {
          ticketLink.length > 0 ? <a href={ticketLink}>{name}</a> : {name} 
        }
      </td>
      <td> {location} </td>
    </tr>
  );
};

This should render a name with a hyperlink around it if the ticketLink prop exists, otherwise it should just render the name.

If I use the code as-is I get the error:

Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

This is evidently because, as {name} is surrounded by two sets of curly brackets, React is considering it to be an object rather than a string.

I know that I can break the code up and conditionally render using an if / else statement, but is there any way of modifying the ternary so that it will be parsed correctly?

Answer 1

You don't need the {name}. It's evaluating actual js code by then. just use name like this:

{ticketLink.length > 0 ? <a href={ticketLink}>{name}</a> : name}