Dfyjkt

I am trying functional components with hooks of react 16.7,there is an error:

src/components/Footer/index.js

function Footer() 
 const [selectedTab, setSelectedTab] = useState('redTab');
 const [hidden, setHidden] = useState(false);
 const [fullScreen, setFullScreen] = useState(false);
 //...

package.json

What should I do?

Make sure that you upgrade react-dom to 16.7.0-alpha.0 as well.

package.json

 "dependencies": 
 "react": "16.7.0-alpha.0",
 "react-dom" "16.7.0-alpha.0",
 ...
 ,
 ...

It might also be that you only bumped the version in package.json without installing the new version. You can remove node_modules and install again.

npm ci

Example

const useState = React;

function Footer() 
 const [selectedTab, setSelectedTab] = useState('redTab');
 const [hidden, setHidden] = useState(false);
 const [fullScreen, setFullScreen] = useState(false);
 
 return (
 <div>
 <button onClick=() => setSelectedTab('blueTab')>selectedTab</button>
 <button onClick=() => setHidden(isHidden => !isHidden)>
 hidden ? 'hidden' : 'visible'
 </button>
 <button onClick=() => setFullScreen(isFullScreen => !isFullScreen)>
 fullScreen ? 'fullscreen' : 'windowed'
 </button>
 </div>
 );


ReactDOM.render(
 <Footer />,
 document.getElementById('root')
);

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="root"></div>

React and react-dom versions are different in your package.json

So to fix the issue you need to upgrade react-dom to the same version as react

Run below command. This will install react-dom version 16.7.0-alpha.0

 npm i -s react-dom@16.7.0-alpha.0

After installing react-dom re bundle the project.

I have installed both react and react-dom alpha, as you can see in this package.json.

Using, in the same project, the following code, would work just fine:

import React, useRef, useState from 'react';

function Counter() 
 const [count, setCount] = useState(0);
 const [icount, setICount] = useState(0);
 const current: increment = useRef(1 + Math.floor(Math.random() * 5));
 return (
 <div>
 Count count<br />
 Increment increment<br />
 <button onClick=() => 
 setCount(count + 1);
 setICount(icount + increment);
 clicks=count>
 Current icount
 </button>
 </div>
 );


export default Counter;

That export can be tested/used via a basic app like:

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';

ReactDOM.render(<Counter />, document.body);

I hope this example clarifies/solves your issues.

Best Regards