53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
function AddGameNight(props) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const [gameName, setGameName] = useState("");
|
|
const [date, setDate] = useState(null);
|
|
|
|
const handleAddGamenight = (event) => {
|
|
props.onChange({
|
|
game: gameName,
|
|
datetime: date
|
|
});
|
|
event.preventDefault();
|
|
};
|
|
|
|
const handleNameChange = (event) => {
|
|
setGameName(event.target.value);
|
|
};
|
|
|
|
const handleDateChange = (event) => {
|
|
setDate(event.target.value);
|
|
};
|
|
|
|
if(expanded) {
|
|
return (
|
|
<div className="Add-GameNight">
|
|
<form onSubmit={handleAddGamenight}>
|
|
<fieldset>
|
|
<legend>Gamenight</legend>
|
|
|
|
<label for="gamename">Game name:</label>
|
|
<input id="gamename" name="gamename" type="text"
|
|
value={gameName}
|
|
onChange={handleNameChange} />
|
|
<label for="date">date:</label>
|
|
<input id="date" name="date" type="date"
|
|
value={date}
|
|
onChange={handleDateChange} />
|
|
|
|
<input type="submit" value="Submit" />
|
|
</fieldset>
|
|
</form>
|
|
<button onClick={() => {setExpanded(false)}}>Expand</button>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<button onClick={() => {setExpanded(true)}}>Expand</button>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default AddGameNight |