в зависимости от выбора моего пользователя Change the type
или Choose the comments
(он может выбрать только один вариант), будет разное отображение, но мой код отображал оба варианта на одной странице.
Итак, в начале всего 2 галочки Change the type
или Choose the comments
затем в зависимости от выбора появляется отображение
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>
</>
);
}
Вот мой код
Я понял лучше благодаря картинке, которую вы добавили, вот код: https://codesandbox.io/s/first-page-with-dynamic-field-forked-vpxyhu?file=/src/App.js
Привет, я думаю, что мы не поняли друг друга, я отредактировал вопрос, добавив картинку, чтобы получить представление