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.

What errors are you getting?

Matt U
– Matt U

2021-10-31 05:54:59 +00:00
Commented Oct 31, 2021 at 5:54 — Matt U
– Matt U, Commented Oct 31, 2021 at 5:54

Andy · Accepted Answer · 2021-10-31 06:13:57Z

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>

DecPK · Accepted Answer · 2021-10-31 05:25:26Z

2

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>
  );
}

answered Oct 31, 2021 at 5:25

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Comments

NaKib · Accepted Answer · 2021-10-31 05:26:43Z

1

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

answered Oct 31, 2021 at 5:26

NaKib

5715 silver badges14 bronze badges

Comments

Lucas Salazar · Accepted Answer · 2021-10-31 06:13:05Z

1

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>

edited Oct 31, 2021 at 6:13

answered Oct 31, 2021 at 5:39

Lucas Salazar

313 bronze badges

Collectives™ on Stack Overflow

How to use conditional rendering inside map in React

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related