37 lines
782 B
JavaScript
37 lines
782 B
JavaScript
import React, { useState } from "react";
|
|
import "./PlayerName.css";
|
|
import { TextField, Button } from '@material-ui/core';
|
|
|
|
const PlayerName = ({ name, setName }) => {
|
|
const [edit, setEdit] = useState(name);
|
|
|
|
const sendName = () => {
|
|
setName(edit);
|
|
}
|
|
|
|
const nameChange = (event) => {
|
|
setEdit(event.target.value);
|
|
}
|
|
|
|
const nameKeyPress = (event) => {
|
|
if (event.key === "Enter") {
|
|
setName(edit ? edit : name);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="PlayerName">
|
|
<TextField className="nameInput"
|
|
onChange={nameChange}
|
|
onKeyPress={nameKeyPress}
|
|
label="Enter your name"
|
|
variant="outlined"
|
|
value={edit}
|
|
/>
|
|
<Button onClick={sendName}>Set</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { PlayerName };
|