React - Operator '<' cannot be applied to types 'void' and 'number'

Question

I have a demo available on StackBlitz . This is very pseudo code and my actual code is a lot more complicated.

I have three components loaded into index.tsx . Each component has a conditional that checks the boolean above. My actual code checks data from a GraphQL call.

If the component is shown I want to store the text. I'm trying to do this with useState . So, if the About section is shown add 'About' to the nav state.

I'm getting the error:

Operator '<' cannot be applied to types 'void' and 'number'

Can anyone explain this error, is it possible to do this?

import React, { useState } from "react";
import { render } from "react-dom";
import About from "./About";
import Products from "./Products";
import Contact from "./Contact";
import "./style.css";

const App = () => {
  const [nav, setNav] = useState([])

  const about = true;
  const products = true;
  const contact = true;

  return (
    <div>
      {about && (
        setNav([...nav, 'About'])
        <About />
      )}
      {products && (
        setNav([...nav, 'Products'])
        <Products />
      )}
      {contact && (
        setNav([...nav, 'Contact'])
        <Contact />)}
    </div>
  );
};

render(<App />, document.getElementById("root"));

Answer 1

I'm not sure if I understand your question correctly. If your code checks data from a GraphQL call, you should update the nav state from there (right after you received the response) and display the components based on that state, not the other way around.

You can use the useEffect hook to grab the response and update your state. I would also use an object instead of an array to store the nav state (it's easier to update its values).

 function App() { const [nav, setNav] = React.useState({ about: false, contact: false, products: false, }); React.useEffect(() => { // make the graphQL call here and based on the response update the state: const graphqlResponse = { about: true, contact: false, products: true, //... others } setNav({ about: graphqlResponse.about, contact: graphqlResponse.contact, products: graphqlResponse.products, }); }, []); return ( <div> {nav.about && <About />} {nav.products && <Products />} {nav.contact && <Contact />} <pre>{JSON.stringify({nav}, null, 2)}</pre> </div> ); }; function About() { return <h2>About</h2> } function Contact() { return <h2>Contact</h2> } function Products() { return <h2>Products</h2> } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

This should work:

{ about && setNav(["About", ...nav]) && <About /> }
{ products && setNav(["Product", ...nav]) && <Products /> }
{ contact && setNav(["Contact", ...nav]) && <Contact /> }