ReactLearning/ReactLearning/task-app/src/components/AddTask.js

import { useState } from 'react'

const AddTask = ({onAdd}) => {
    const [text, setText] = useState('')
    const [day, setDay] = useState('')
    const [reminder, setReminder] = useState(false)

    const onSubmit = (e) => {
        e.preventDefault()

        if (!text){
            alert('Please add a task')
            return
        }
        onAdd({ text, day, reminder})

        setText('')
        setDay('')
        setReminder(false)
    }
    return (
        <form className = 'add-form' onSubmit={onSubmit}>
            <div className = 'form-control'>
                <label>Task</label>
                <input type='text' placeholder='add task' value={text} onChange = {(e) => setText(e.target.value)}></input>
            </div>
            <div className = 'form-control'>
                <label>Day</label>
                <input type='text' placeholder='add day'value={day} onChange = {(e) => setDay(e.target.value)}></input>
            </div>
            <div className = 'form-control form-control-check'>
                <label>Set Reminder</label>
                <input type='checkbox' value={reminder} onChange = {(e) => setReminder(e.currentTarget.checked)}
                checked={reminder}></input>
                </div>
                <input type='submit' value="Save Task" className='btn btn-block'></input>

        </form>
    )
}
export default AddTask