Tienes un error en tu sintaxis. No debe usar llaves si regresa directamente. Las llaves {} solo se usan cuando tiene que hacer algún procesamiento/cálculo y luego no quiere devolver nada o si devuelve algo y no la función completa que escribió. Por ejemplo, use llaves aquí:

 const temp = () => { let a=20; console.log('a',a); };

Tenga en cuenta que no quiero devolver nada en la función.

Sin embargo, si no tiene nada que procesar o desea devolver directamente lo que está procesando, use corchetes redondos () .

 const temp = () => { let a = 20; console.log('a', a); return ( <div> <h1>Hi</h1> there </div> ); };

Tenga en cuenta que estoy devolviendo varias líneas arriba.

Además, si tiene varias líneas de código para devolver, use corchetes redondos () , de lo contrario, simplemente devuelva el valor.

 const temp = () => { let a = 20; console.log('a', a); return 'Hi'; };

En este operador ternario, está devolviendo la función products.map(... y para cada producto, está devolviendo el componente <CartProduct . Esta es una declaración única (dado que map es una función), por lo que no necesita usar round () también Entonces, la forma correcta de escribir el código es:

 {tf > 0 ? products.map((product) => <CartProduct key={product.id} productData={product} />) : ''}

Sin embargo, si desea usar corchetes redondos () para declaraciones de devolución de una sola línea, también puede hacerlo.

 const temp = () => { let a = 20; console.log('a', a); return ('Hi'); };

Entonces, también puedes reescribir tu código como:

 {tf > 0 ? (products.map((product) => <CartProduct key={product.id} productData={product} />)) : ''}

Ambas formas son correctas.

{tf > 0 ? products.map(product => <CartProduct key={product.id} productData={product}/>) : null}

Debe eliminar el alcance del bloque ( {} ) alrededor de la llamada products.map y no devolver una cadena vacía '' en JSX; en su lugar, devuelve null .