How to use conditional rendering inside map in React

Question

I have a react page that is rendering a list of products that are being returned from a GraphQL API. Once the products are returned, I'm storing them in a state and then render them. How do I only render products that meet certain conditions?

Right now, I'm mapping over the products and rendering each one. This is working correctly. But if I try to use conditional statements, I get errors in my IDE. This is the code I currently have. This is currently working:

async function contactAPI() {
  return await axios({
    url: 'https://graphqlexample.com/api/products',
    method: 'post',
    data: {
      query: `
      QUERY GOES HERE
        `
    }
  })
}

function App() {  
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function getData() {
      const res = await contactAPI();
      setProducts(res.data.data.products);
    }
    getData();
  }, []);

  return (
    <div>
        <div>          
          {products.map(p =>           
          (             
          <div>            
            <ProductCard productName={p.productName} />
          </div>
          ))}
        </div>    
    </div>
  );
} 

I need to check p.productName to see if it meet certain conditions, and if it does, render it. If not, don't render. I tried using different conditionals inside of map , but keep getting errors.

Answer 1

As an example you can just return the JSX if it will meet certain criterion as:

Note: For demo purpose I've used includes method. You can specify the condition

(<div><ProductCard productName={p.productName} /></div>)

and will only render if the first condition is true

  <div>
    {products.map((p) => (
      p.productName.includes("free") && (<div><ProductCard productName={p.productName} /></div>)
    ))}
  </div>

export default function App() {
  const arr = [1, 2, 3, 4, 5];
  return (
    <div>
      {arr.map((n) => {
        return n % 2 === 0 && <div key={n}>{n}</div>;
      })}
    </div>
  );
}

Answer 2

map will always return an array of the same length so you'll be returning some empty elements depending on the condition which isn't optimal.

Instead filter the data first, and then map over the returned array. That way you're only mapping over the data you need to display.

 const { useState } = React; function App({ data }) { const [ products, setProducts ] = useState(data); // In this example we take the list of products in // state and return a new array of only those products // that aren't soap. We then `map` over that array in our // component render function getFilteredProducts() { return products.filter(product => { const name = product.productName.toLowerCase(); return !name.includes('soap'); }); } // Get an array of filtered products and then `map` over it // to produce the product cards return ( <div> {getFilteredProducts().map(product => { return ( <ProductCard key={product.id} id={product.id} name={product.productName} /> ); })} </div> ); }; function ProductCard({ id, name}) { return <div>{id}: {name}</div>; } const data=[{id:1,productName:"Blue Soap"},{id:2,productName:"Beans"},{id:3,productName:"Green Soap"},{id:4,productName:"Sponge"},{id:5,productName:"Chicken"}]; ReactDOM.render( <App data={data} />, document.getElementById('react') );

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

Answer 3

{
    products.map(id => {
      return condition == true ?
        <div>            
          <ProductCard productName={p.productName} />
        </div>
    : <div></div>
})}

Answer 4

 const products = [ { productName: "product1" }, { productName: "product2" }, { productName: "product3" } ]; const App = () => { return ( <div className="App"> <div> {products.map((p, index) => { if (p.productName === "product1") { return <div key={index}>{p.productName}</div>; } return <React.Fragment></React.Fragment>; })} </div> </div> ); } ReactDOM.render( <App />, document.getElementById("react") );

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