GatsbyJs возвращает неожиданный токен "если" при компиляции

Question

У меня есть простой код в gatsbyJs, который получает данные из Staticquery ingraphql и отображает компонент. Мне нужно проверить в функции рендера, существует ли подобъект в объекте данных, и добавить

HTML-блок с данными, если подобъект существует.

Вот код:

import React from 'react'
import { Link, StaticQuery, graphql } from 'gatsby'

export default () =>(
   <StaticQuery
   query={graphql`
       query ProductQuery {
        contentful: allContentfulProduct {
          products: edges {
            product: node {
              id
              name
              teaser {
                       teaser
                     }
            }
          }
       }}
       `}
    render={data => (

        data.contentful.products.map((product) => (
           <div className="col-md-4 inline">
             <h1>{product.product.name}</h1>
             {if (product.product.teaser !==null){
                <p>{product.product.teaser.teaser}</p>
             } 


             { console.log(product)}
           </div>

        )
     ))}
     />
)

Когда я удаляю блок if, код работает нормально, но с компиляцией if.

Answer 1

Вы не можете использовать if оператор в строке внутри выражения фигурной скобки, как это. Попробуйте изменить свой синтаксис на:

{product.product.teaser !== null && (
    <p>{product.product.teaser.teaser}</p>
)}

Дополнительные примеры в документации: https://reactjs.org/docs/conditional-rendering.html