map in react not displaying data with { } (curly brackets)

Question

So I am trying to return the data from API by map and when I am using ( ) these brackets I am getting the data when I use { } to put if statement, I am getting nothing on my web page but still getting the data in console

const Addtocart = () => {
  const data = useSelector((state) => state);
  console.log("products", data.productData);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(productList());
  }, []);

  return (
    <div id="addtocart-info">

      <div className="products">
        {data.productData.map((item) => {                 // here this bracket  
          if (item.id % 2 === 0 || item.id === 0) {
            <div key={item.id} className="product-item">
              <img src={item.photo} alt="" />
              <div>Name : {item.name} </div>
              <div>Color : {item.color} </div>
              <button onClick={() => dispatch(addToCart(item))}>
                ADD to Cart
              </button>
            </div>;
            console.warn(item.id);
          } else {
            console.log(item.id);
          }
        })}
      </div>
    </div>
  );
};

export default Addtocart;

Is there any way to put if statement with () or make this work

Answer 1

You are not getting anything because when u use {} you have to use a return keyword, but when you are using () you don't have to use a return keyword because the whole code inside this is considered as a single piece of code even if it's distributed in multiple lines so change your code to ,

{data.productData.map((item) => {                 // here this bracket  
          if (item.id % 2 === 0 || item.id === 0) {
            return (
                 <div key={item.id} className="product-item">
                    <img src={item.photo} alt="" />
                    <div>Name : {item.name} </div>
                    <div>Color : {item.color} </div>
                    <button onClick={() => dispatch(addToCart(item))}>
                        ADD to Cart
                    </button>
                 </div>
            )
          } else {
            console.log(item.id);
          }
        })}

Answer 2

If you use curly brackets you also need to use a return statement. Basically if you don't use curly brackets in an arrow function the statement is returned automatically.

Example:

let x = someArray.map(x => x*2); // returns a new array with the expression applied
let x = someArray.map(x => {return x * 2}) // use the return here