React Синтаксическая ошибка: неожиданный токен, ожидается ","

Question

После https://blog.heroku.com/a-rock-solid-modern-web-stack при настройке на собственный вариант использования.

Когда я обновляю свой app.js файл следующим образом:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor () {
    super()
    this.state = {}
    this.getWords = this.getWords.bind(this)
    this.getWord = this.getWord.bind(this)
  }

  componentDidMount () {
    this.getWords()
  }

  fetch (endpoint) {
    return window.fetch(endpoint)
      .then(response => response.json())
      .catch(error => console.log(error))
  }

  getWords () {
    this.fetch('/api/words')
      .then(words => {
        if (words.length) {
          this.setState({words: words})
          this.getWord(words[0].id)
        } else {
          this.setState({words: []})
        }
      })
  }

  getWord (id) {
    this.fetch(`/api/words/${id}`)
      .then(word => this.setState({word: word}))
  }

  render () {
    let {words, word} = this.state
    return words
    ? {words && words.length
      ? {Object.keys(words).map((key) => {
          return <a href={word && word.id === words[key].id} onClick={() => this.getWord(words[key].id)}>
                  {words[key].term}
                </a>
        })}
      : <p>No word found.</p>
    }
    : <p>Loading...</p>
  }
}

export default App;

Я получаю следующую ошибку:

./src/App.js
Syntax error: Unexpected token, expected "," (42:14)

  40 |     let {words, word} = this.state
  41 |     return words
> 42 |     ? {words && words.length
     |              ^
  43 |       ? {Object.keys(words).map((key) => {
  44 |           return <a href={word && word.id === words[key].id} onClick={() => this.getWord(words[key].id)}>
  45 |                   {words[key].term}

Несмотря на немного меньшую структуру макета страницы, логика мне кажется такой же.

Чего мне не хватает?

ОБНОВЛЕНИЕ : Я отредактировал код следующим образом:

  render () {
    let {words, word} = this.state
    return words
    ? (words && words.length)
      ? (Object.keys(words).map((key) => {
          return <a href={word && word.id === words[key].id} onClick={() => this.getWord(words[key].id)}>
                  (words[key].term)
                </a>
        })
      : return
        <p>No words found.</p>
    }
    : <p>Loading...</p>
  }

и теперь я получаю следующую ошибку:

./src/App.js
Syntax error: Unexpected token (48:9)

  46 |                 </a>
  47 |         })
> 48 |       : return
     |         ^
  49 |         <p>No words found.</p>
  50 |     }
  51 |     : <p>Loading...</p>

Я явно что-то упускаю, так как не могу понять, в чем проблема: любая помощь приветствуется.

Answer 1

Похоже, что есть дополнительные фигурные скобки, и логика кажется немного не так. Попробуйте это:

    return (words && words.length)
    ? Object.keys(words).map((key) => {
        return <a href={word && word.id === words[key].id} onClick={() => this.getWord(words[key].id)}>
              {words[key].term}
            </a>
        })
    : <p>No word found.</p>