how do i get data from reactstrap form?
Published: 2022-09-06 19:47:53

i want to console log the data after it's been submitted.
how would i go about doing it? when i take the target section of the event it returns the html object itself, not it's data
ty for anyone who answers :)

`import React from 'react';
import { Form, FormGroup, Label, Input, Button, Modal, ModalHeader, ModalBody } from 'reactstrap';
import './taskAdder.css';
class TaskAdder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showForm: false,
            newTask: {
                title: '',
                description: '',
                notificationDate: {},
                notificationTime: {}
            }
        };
        // idk what both of those do
        this.toggle = this.toggle.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }
    render() {
        return (
            <div className='task-adder'>
                <Button onClick={this.toggle}>Add a New Task</Button>
                <Modal isOpen={this.state.showForm}>
                    <ModalHeader toggle={this.toggle}>New Task</ModalHeader>
                    <ModalBody>
                        <Form onSubmit={(e) => { this.onSubmit(e) }}>
                            <legend>New Task</legend>
                            <FormGroup>
                                <Label for='title'>Title</Label>
                                <Input type='text' name='title' id='title' placeholder='i.e. buy milk' />
                            </FormGroup>
                            <FormGroup>
                                <Label for='description'>Description</Label>
                                <Input type='textarea' name='description' id='description' placeholder='i.e. at the grocery store on 75th avenue' />
                            </FormGroup>
                            <FormGroup>
                                <legend>Notification</legend>
                                <FormGroup>
                                    <Label for='notification-date'>Date</Label>
                                    <Input type='date' name='notificationDate' id='notification-date' />
                                </FormGroup>
                                <FormGroup>
                                    <Label for='notification-time'>Time</Label>
                                    <Input type='time' name='notificationTime' id='notification-time' />
                                </FormGroup>
                            </FormGroup>
                            <Button>Submit</Button>
                        </Form>
                    </ModalBody>
                </Modal>
            </div>
        );
    }
    toggle() {
        this.setState({
            showForm: !this.state.showForm
        });
    }
    onSubmit(e) {
        e.preventDefault();
        const { target } = e;
        const { title, description, notificationDate, notificationTime } = target;
        this.setState({
            newTask: {
                title: title,
                description: description,
                notificationDate: notificationTime,
                notificationTime: notificationTime
            }
        });
        console.log(this.state.newTask);
        console.log(typeof notificationDate, typeof notificationTime)
    }
}
export default TaskAdder;`