ReferenceError visible is not defined

Question

i try to do hide/show in react I took the code from the internet. But I probably put it in the wrong place. please help

my code https://codesandbox.io/live/4e62cd7f12d

where I took the code https://dirask.com/posts/React-how-to-show-or-hide-element-jvorZ1

Answer 1

you've declared the visible variable inside the lis subcomponent/function but used in the main component.

You need to define the visible variable in the main component.

Answer 2

If you use default React project you need to export App component as default. You can use import React, {useState} from 'react' too.

App.js file content:

import React, {useState} from 'react';

const App = () => {
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <button onClick={() => setVisible(!visible)}>
        {visible ? 'Hide' : 'Show'}
      </button>
      {visible && <div>My element</div>}
    </div>
  );
};

export default App;