DEV Community

IdanMenaged
IdanMenaged

Posted on

how do i get data from reactstrap form?

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;

Top comments (0)