{"size": 740, "ext": "js", "max_stars_repo_path": "src/components/ChatForm.js", "max_stars_repo_name": "ozanorkun/chatapp-client", "max_stars_repo_stars_event_min_datetime": "2021-01-17T22:31:43.000Z", "max_stars_repo_stars_event_max_datetime": "2021-01-23T12:11:16.000Z", "max_issues_repo_path": "src/components/ChatForm.js", "max_issues_repo_name": "ozanorkun/chatapp-client", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/ChatForm.js", "max_forks_repo_name": "ozanorkun/chatapp-client", "max_forks_repo_forks_event_min_datetime": "2021-01-24T18:05:33.000Z", "max_forks_repo_forks_event_max_datetime": "2021-01-31T19:30:58.000Z"}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": 2, "avg_line_length": 21.1428571429, "max_line_length": 59, "alphanum_fraction": 0.6513513514}
import { useState, useContext } from 'react';

import styles from './style.module.css';

import ChatContext from '../contexts/ChatContext';
import { sendMessage } from '../socketService';

function ChatForm() {
	const [message, setMessage] = useState('');

	const { messages, setMessages } = useContext(ChatContext);

	const handleSubmit = (e) => {
		e.preventDefault();
		sendMessage(message);
		setMessages([...messages, { message, fromMe: true }]);
		setMessage('');
	};

	return (
		<div>
			<form onSubmit={handleSubmit}>
				<input
					value={message}
					onChange={(e) => setMessage(e.target.value)}
					placeholder="bir mesaj yazın..."
					className={styles.textInput}
				/>
			</form>
		</div>
	);
}

export default ChatForm;
