```jsx
// useState钩子函数返回一个包含当前状态和更新状态的函数的数组
import React, { useState } from 'react';
function Contact() {
const password = 'swordfish';
const [authorized, setAuthorized] = useState(false);
function handleSubmit(e) {
const enteredPassword = e.target.querySelector(
'input[type="password"]').value;//获取 input标签且 type 等于 password 的标签
const auth = enteredPassword == password;//当用户输入的值等于变量 password
setAuthorized(auth)// 将 auth 作为参数传递给 setAuthorized，根据 useState 的状态变化
}
//制作登录表单变量
const login = (
<form action='#' onSubmit={handleSubmit}>
<input type="password" placeholder="password"/>
<input type="submit" />
</form>
);
// 将原来 return 中的列表移到了 contactinfo 中，隐藏了联系信息，通过保存在变量中就可以切换状态了useState
const contactInfo = (
<ul>
<li>
[email protected]
</li>
<li>
555.555.5555
</li>
</ul>
);
return (
<div id="authorization">
<h1>
{authorized===true ? 'Contact' : 'Enter the password'}
</h1>
{authorized===true ? contactInfo : login}
</div>
);
}
//根据 useState 的状态变化,展示输入密码页面还是展示联系方式页面。函数和变量不同，不需要写大括号
export default Contact;
```
[Authorization Form](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-react-components-860d3f06-e0ad-456f-b7fa-d5aef4dd565d/projects/authorization-form)