How do I persuade babel to let me define a Javascript array of consts?

I’m building my first expo/react app. I keep getting an “Unexpected token” error message in App.js:

export default class App extends React.Component {
   const [message, setMessage] = useState("...");

the error being in the [ of the line beginning const.

As best I can tell, this is a babel issue: this syntax was introduced in ES2015. AFAICS, this should be resolvable by adding @babel/preset-env to babel.config.js thus:

module.exports = function(api) {
  api.cache(true);
  return {
      presets: [
          '@babel/react',
          '@babel/env',
      ],
      plugins: [
          '@babel/proposal-class-properties',
      ],
  };
};

Bundling succeeds, but the error remains! What am I missing?

Answer

The error is not because you are trying to use array de-structuring in general, it is because you are doing it inside the body of a class (where you can only declare properties).

React Hooks are only compatible with Function components anyway. You can’t use them in Class components.

So you need to use Function Component syntax.

const App = () => {
   const [message, setMessage] = useState("...");
   // ...
}

export default App;

---

Further reading:

• Classes in JavaScript (MDN)
• Function and Class Components (React) (A brief summary)
• React Component (API reference for the React component class definition)