React hooks won't work in free workspace

Anybody knows why this code is not working? I don’t have any problems to execute the react hooks in the exercises, but here, every time I try to put this line:
const [test, setTest] = useState();
my code stop running.

Hi,
as far as I know, you can’t mix class based components (app.js) and functional components (test.js). In which exercise did you do that, can you link the lesson?

1 Like

thanks for answer me. But same doing that:

import React, { useState } from ‘react’;

import ReactDOM from ‘react-dom’;

export default function App() {

const [test, setTest] = useState();

return (

<h1>Hello world</h1>

);

};

ReactDOM.render(

,

document.getElementById(‘app’)

);

the code doesn’t run as long as I keep this line:
const [test, setTest] = useState();

Not sure if that is just bad practice or the reason why your app crashes:
You should initialize your state hook like

const [test, setTest] = useState('');
const [test, setTest] = useState({});
const [test, setTest] = useState(null);
const [test, setTest] = useState([]); // whatever data type will be set

Please format your code following this guide: https://discuss.codecademy.com/t/how-to-format-code-in-posts/51139

1 Like

i know that. In the exercises my code always executes normal, I don’t know what’s going on, maybe it’s not my fault. Thanks for try to help me. :slight_smile:

1 Like

This is definitely an error of the free workspace. I came across the same issue with this code snipped:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
 
const Match4 = () =>{
  const rows = 6;
  const cols = 7;
  const boardTemplate = Array.from({length: rows},()=> Array.from({length: cols}, () => null));
  const [board, setBoard] = useState(boardTemplate);
  
  
  return (
    <div>
    <p>
    <h1>Hello world</h1>
    </p>
    <table>
      <tbody>
      <tr>
        <td>x</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
      {board.map((row, rowIndex) => (
            <tr key={rowIndex}>
            <td>{rowIndex+1}</td>
              {row.map((column, columnIndex) => (
                <td key={columnIndex}>
                  {column}
                </td>
              ))}
            </tr>
          ))}


      </tbody>
    </table>
    </div>
    );
};
ReactDOM.render(
  <Match4/>,
  document.getElementById('app')
);

and it fails on the useState:

const [board, setBoard] = useState(boardTemplate);

I tested the same code on “CodeSandbox” and all works! No errors, no warnings…

1 Like

Exacly, i’ve tryed send a e-mail to report the problem but no lucky until now.

React hooks were added in React 16.8. Codecademy React workspace uses React 15.1.0, so hooks are not supported.

1 Like