REACT- 根据选择复选框制作 2 个不同的动态显示（现在所有内容都在同一页面上）

Question

根据我的用户Change the type或Choose the comments的selection（他只能select一个选择），会有不同的显示，但我的代码在同一页面中显示了两个选项。

所以，一开始只有 2 个复选框 Change the type 或 Choose the comments 然后根据 selection 显示出现

 export default function App(){
  ...
  return (
    <>
     {/* Step 1- 2 checkboxes are displayed */}
      <form onSubmit={handleSubmit}>
        <input type="checkbox" onChange={(e) => setType(e.target.value)} />
        <span className="text-md p-1 font-bold  leading-8 text-gray-500">
          Change the type{" "}
        </span>
        <input type="checkbox" onChange={(e) => setComment(e.target.value)} />
        <span className="text-md p-1 font-bold  leading-8 text-gray-500">
          Choose the comments{" "}
        </span>
      </form>
      
      {/*Step 2 - if setType ==true then display */}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={menu}
          placeholder="Menu"
          onChange={(e) => setMenu(e.target.value)}
        />
        <div className="text-md font-bold  text-gray-500 flex flex-wrap gap-x-2 ">
          Type : <CustomDropdown options={LOCATION} isMulti={false} />
        </div>
        <label className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
          Location:
        </label>
        <input
          type="text"
          value={location}
          placeholder="Location"
          onChange={(e) => setLocation(e.target.value)}
        />
      </form>

      {/*Step 2 - if setComment ==true (selected) then display */}
      <form onSubmit={handleSubmit}>
        <Comments />
        <input
          type="text"
          value={menu}
          placeholder="Menu"
          onChange={(e) => setMenu(e.target.value)}
        />
        <div className="text-md font-bold  text-gray-500 flex flex-wrap gap-x-2 ">
          Type : <CustomDropdown options={LOCATION} isMulti={false} />
        </div>
        <label className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
          Location:
        </label>
        <input
          type="text"
          value={location}
          placeholder="Location"
          onChange={(e) => setLocation(e.target.value)}
        />
      </form>
    </>
  );
}

这是我的code

这里有一张图片可以理解：

Answer 1

多亏了你加的图片，我明白了，这里是代码：https://codesandbox.io/s/first-page-with-dynamic-field-forked-vpxyhu?file=/src/App.js

REACT- 根据选择复选框制作 2 个不同的动态显示（现在所有内容都在同一页面上）

REACT- Making 2 different dynamic displays depending on a selection checkboxes ( everything is on the same page now)

javascript

checkbox

reactjs

react-hook-form