Js6 домашка... пж

import React, { useState } from "react";

function App() {
const [isFormVisible, setIsFormVisible] = useState(false);
const [name, setName] = useState("");
const [age, setAge] = useState("");
const [city, setCity] = useState("");

const handleFormToggle = () => {
setIsFormVisible(!isFormVisible);
};

const handleNameInputChange = (event) => {
setName(event.target.value);
};

const handleAgeInputChange = (event) => {
setAge(event.target.value);
};

const handleCitySelectChange = (event) => {
setCity(event.target.value);
};

const handleFormReset = () => {
setName("");
setAge("");
setCity("");
setIsFormVisible(false);
};

return (
<div>
<button onClick={handleFormToggle}>Show form</button>
{isFormVisible && (
<form>
<label>
Name:
<input type="text" value={name} onChange={handleNameInputChange} />
</label>
<br />
<label>
Age:
<input type="text" value={age} onChange={handleAgeInputChange} />
</label>
<br />
<label>
City:
<select value={city} onChange={handleCitySelectChange}>
<option value="">Choose a city</option>
<option value="Moscow">Moscow</option>
<option value="New York">New York</option>
<option value="Paris">Paris</option>
</select>
</label>
<br />
<button type="button" onClick={handleFormReset}>
Cancel
</button>
</form>
)}
</div>
);
}

export default App;

Вот пример страницы с условным рендерингом, onClick, onChange и select/option:

 import React, { useState } from "react"; 
 
function App() { 
  const [showForm, setShowForm] = useState(false); 
  const [name, setName] = useState(""); 
  const [age, setAge] = useState(""); 
  const [selectedOption, setSelectedOption] = useState(""); 
 
  const handleButtonClick = () => { 
    setShowForm(!showForm); 
  }; 
 
  const handleCancel = () => { 
    setShowForm(false); 
  }; 
 
  const handleChange = (e) => { 
    const { name, value } = e.target; 
    if (name === "name") { 
      setName(value); 
    } else if (name === "age") { 
      setAge(value); 
    } else if (name === "selectedOption") { 
      setSelectedOption(value); 
    } 
  }; 
 
  return ( 
    
 
       
        {showForm ? "Скрыть форму" : "Показать форму"} 
       
      {showForm && ( 
        
 
           
            Имя: 
             
           
          
 
           
            Возраст: 
             
           
          
 
           
            Выбери любимый персонаж: 
             
              Выбери... 
              Персонаж 1 
              Персонаж 2 
              Персонаж 3 
             
           
          
 
           
            Отмена 
           
        
 
      )} 
    
 
  ); 
} 
 
export default App; 
 

В этом примере мы используем состояние (useState) для отслеживания отображения формы, имени, возраста и выбранного варианта. Мы также используем обработчики событий для обработки кликов по кнопкам и изменений в полях формы.

Мой канал "Академия сайтов" по WEB программированию - Заходим и подписываемся