用钩子反应条件div

我正在创建一个注册表单，该表单将根据注册人是选择表单Post a project还是Work on a project从表单的第一个div进行呈现。

如何form-group根据第一个div中选择的内容有条件地渲染随后的每个div？我正在使用挂钩，并且发现大多数示例都适用于该extends Component方法。

我的表格：

const signUpForm = () => (
  <form onSubmit={clickSubmit}>
    <div className="form-group">
      <select onChange={handleChange("role")} class="form-control">
        <option selected>I want to...</option>
        <option>Post a project</option>
        <option>Work on a project</option>
      </select>
    </div>

    <div className="form-group">
      <input
        onChange={handleChange("name")}
        type="text"
        placeholder="Name"
        className="form-control"
        value={name}
      />
    </div>

    <div className="form-group">
      <input
        onChange={handleChange("email")}
        type="email"
        placeholder="Email"
        className="form-control"
        value={email}
      />
    </div>

    <div className="form-group">
      <input
        onChange={handleChange("password")}
        type="password"
        placeholder="Password"
        className="form-control"
        value={password}
      />
    </div>

    <div className="form-group">
      <input
        onChange={handleChange("studying")}
        type="text"
        placeholder="I'm studying..."
        className="form-control"
        value={studying}
      />
    </div>

    <div>
      <div>{createInputs()}</div>
      <button
        className="btn btn-outline-primary btn-sm mb-3"
        onClick={addSkill}
        type="text"
      >
        Add more skills
      </button>
    </div>

    <button onClick={clickSubmit} className="btn btn-primary" type="submit">
      Sign Up
    </button>
  </form>
);

州：

const Signup = () => {
  const [values, setValues] = useState({
    name: "",
    email: "",
    password: "",
    studying: "",
    skills: [""],
    error: "",
    success: "",
    role: ""
  });

  const { name, email, password, studying, skills, success, error, role } = values;

handleChange（）：

 const handleChange = name => event => {
    setValues({ ...values, error: false, [name]: event.target.value });
  };