waku-org
/
js-waku
mirror of https://github.com/waku-org/js-waku.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Convert to functional component

This commit is contained in:
Franck Royer 2021-04-22 17:02:10 +10:00
parent 5aee9f4841
commit 13e93b176d
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
1 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web-chat/src/MessageInput.tsx
View File

@ -7,45 +7,46 @@ interface Props {
}
export default function MessageInput(props: Props) {
const [inputText, setInputText] = useState<string>('')
const [inputText, setInputText] = useState<string>('');
const sendMessage = () => {
props.sendMessage()
setInputText('')
}
props.sendMessage();
setInputText('');
};
const messageHandler = (event: ChangeEvent<HTMLInputElement>) => {
setInputText(event.target.value)
setInputText(event.target.value);
props.messageHandler(event.target.value);
};
const keyPressHandler = (event: KeyboardEvent<HTMLInputElement>) => {
if (event.key === 'Enter') {
sendMessage()
sendMessage();
}
}
};
return (
<Grid container spacing={2} direction='row' alignItems='center'>
<Grid item xs={11}>
<TextField variant='outlined'
label='Send a message'
value={inputText}
fullWidth
style={{ margin: 8 }}
margin="normal"
InputLabelProps={{
shrink: true,
}}
onChange={messageHandler}
onKeyPress={keyPressHandler}
/>
</Grid>
<Grid item xs={1}>
<Button variant="contained" color="primary" size="large" onClick={sendMessage}>
Send
</Button>
</Grid>
return (
<Grid container spacing={2} direction='row' alignItems='center'>
<Grid item xs={11}>
<TextField variant='outlined'
label='Send a message'
value={inputText}
fullWidth
style={{ margin: 8 }}
margin='normal'
InputLabelProps={{
shrink: true
}}
onChange={messageHandler}
onKeyPress={keyPressHandler}
/>
</Grid>
);
<Grid item xs={1}>
<Button variant='contained' color='primary' size='large'
onClick={sendMessage}>
Send
</Button>
</Grid>
</Grid>
);
}