CODEWITHSUNDEEP
javascriptreactjs
mellis481
mellis481

Reputation: 4168

Failed to execute 'removeChild' on 'Node' with && logical operator

I have a component whose (abbreviated) code looks like this:

export const TestComponent: React.SFC = props => {
  const { tabs, content } = props;
  return (
    <Tabs>
      <TabList>
        {tabs.map((x, i) => {
          const { hasError, children } = x.props;
          return (
            <Tab key={i} className={hasError ? "has-error" : ""}>
              <a>{children}
                {hasError && <i className="fas fa-exclamation-triangle fa-lg"></i>}
              </a>
            </Tab>
          );
        })}
      </TabList>
      <div className="tab-content">
        {content .map((x, i) => {
          return <TabPanel key={i}>{x.props.children}</TabPanel>;
        })}
      </div>
    </Tabs>
  );
};

As you can see, I'm using the logical && operator to do an inline IF statement.

When one of my tabs is in error (eg. because of an input that has failed validation), it correctly renders the contents of that conditional block (an error icon). When I attempt to type something in the input, the page blows up with the following error:

enter image description here

I found that if I remove the inline IF block and always render the icon, it does not error. Why is this happening?

UPDATE Here is a CodeSandbox.

Upvotes: 0

Views: 1816

Answers (1)

mellis481
mellis481

Reputation: 4168

It turns out the cause of my issue was FontAwesome. The original markup for my conditional icon uses the <i> tag, but FontAwesome ultimately converts this to an svg. When React goes to remove the <i> element from the DOM, it no longer exists and it bombs.

I solved this by wrapping the conditional contents in a <div>:

{hasError && (
    <div>
        <i className="fas fa-exclamation-triangle fa-lg" />
    </div>
)}

Upvotes: 1

Related Questions