More than 3 years have passed since last update.

【React】JSX attributes must only be assigned a non-empty expressionの対処法

Last updated at 2021-08-29Posted at 2021-08-29

症状

Reactでコンポーネントを作成していた時、以下のエラーが発生しました。翻訳すると、「JSX属性には、空でない式のみを割り当てる必要があります」でした。

error

SyntaxError: 絶対パス JSX attributes must only be assigned a non-empty expression

該当のソースは以下です。

Hoge.jsx

export function Hoge () {
　function submitHandle() {
    return "Hoge"
  }

  return (
    <buttom onClick={}></buttom>
  )
}

buttomの中のonClickイベントの中身を指定することで解決しました。エラー内容そのままで、jsx要素であるreturn内部のbuttomに何も指定されていなかったため、エラーが出ていたようです。

Hoge.jsx

export function Hoge () {
　function submitHandle() {
    return "Hoge"
  }

  return (
    <buttom onClick={() => submitHandle}></buttom>
  )
}