JSX ничего не возвращает

Question

У меня есть этот код в моем компоненте, я вижу, что при отладке оцениваются значения, но когда код завершает выполнение, я ничего не вижу в результате, что-то не так с моим JSX?

export default class TilesComponent extends React.Component<ITilesComponentProps, {}> {
  public render(): React.ReactElement<ITilesComponentProps> {
    return (
      <div className={styles.tiles}>
        {this.props.structure.tiles != null &&

          this.props.structure.tiles.map((tile) => {
                {(
                <div className="tile">
                  <h1>{tile.tileName}</h1>
                  <h2>wassup</h2>
                </div>
                ) 
            }
        })}
    </div>
    )
  }
}

Я все еще новичок в реакции / jsx, поэтому я могу написать что-то не так.

спасибо.

Answer 1

Требуется коррекция внутри карты

Неправильно:

   this.props.structure.tiles.map((tile) => {
            {(
            <div className="tile">
              <h1>{tile.tileName}</h1>
              <h2>wassup</h2>
            </div>
            ) 
        }
    })}

Правый:

 this.props.structure.tiles.map((tile) => {
            return (
            <div className="tile">
              <h1>{tile.tileName}</h1>
              <h2>wassup</h2>
            </div>
            ) 
    })

Полный фрагмент:

      export default class TilesComponent extends    React.Component<ITilesComponentProps, {}> {
      public render():    React.ReactElement<ITilesComponentProps> {
     return (
        <div className={styles.tiles}>
            {this.props.structure.tiles != null &&

             this.props.structure.tiles.map((tile) => {
                  return(
                   <div className="tile">
                      <h1>{tile.tileName}</h1>
                     <h2>wassup</h2>
                  </div>
                )
            })}
         </div>
         )
       }
     }