import React, {useState} from 'react';
import './inputBox.css';

function InputBox(props) {
    const [inputValue, setInputValue] = useState('');

    const changeHandler = (e) => {
        setInputValue(e.target.value);
    }
  return (
    <div className='inputBoxArea'>
        <div className='inputForm'>
            <input className="inputText" type="text" value={inputValue} onChange={changeHandler} placeholder="욕설을 입력하세요"></input>
            <button className="inputButton" onClick={()=> props.buttonClick(inputValue)}>입력</button>
        </div>
        
    </div>
    
  );
}

export default InputBox;