Conditional statement in React return causes syntax error

Question

I'm having syntax issues within a return. I'm trying to check if an array item exists. The issue is how I am writing the code I think.

The code causing the error is:

{ nodes.childItems ? "has child"  : "no child" }

The error is:

Syntax error: Unexpected token, expected ","

How do I write this within my return?

  const MyNav = () => {
  const [allNavItems, setAllNavItems] = useState(null);

  useEffect(() => {
    const run = async () => {
      const items = await getNavMenu();
      
      setAllNavItems(items);
    };

    run();
  }, []);

  if (!allNavItems) return null;

  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="/">Home</Nav.Link>
            {allNavItems.menuItems && allNavItems.menuItems.nodes.map((nodes) => (
              <Nav.Link href={nodes.path}>{nodes.label}, {nodes.parentId}, {nodes.id} </Nav.Link>
              { nodes.childItems ? "has child"  : "no child "   } 
            ))}
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    )
  }

Or Assayag · Accepted Answer · 2021-01-09 22:10:51Z

1

In JSX you need to include one main element, so change it to:

<>
   <Nav.Link href={nodes.path}>    {nodes.label}, {nodes.parentId}, {nodes.id} </Nav.Link>
   { nodes.childItems   ? "has child"  : "no child "   } 
</>

answered Jan 9, 2021 at 22:10

Or Assayag

6,39213 gold badges73 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditional statement in React return causes syntax error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related