Help

Upcoming database upgrades. Airtable functionality will be reduced for ~15 minutes at 06:00 UTC on Feb. 4 / 10:00 pm PT on Feb. 3. Learn more here

input to more fields in todo-app

Topic Labels: Custom extensions
89 0
cancel
Showing results for 
Search instead for 
Did you mean: 

Hi!

I'm trying to adjust the example todo-app by adding an input field when creating a new task.

For example if I want to add a comment to a new task that should be created simultaneously.

 

In my code below I get a form field to add the comment and the new task is added, but it loses the comment part somewhere on the way.

Can someone help me and see where I've gone wrong?

Thanks!

 

 

function AddTaskForm({ table }) {
const [taskName, setTaskName] = useState('');
const [commentValue, setComment] = useState('');
const commentField = table.getFieldByName('Comment');

function onInputChange(event) {
setTaskName(event.currentTarget.value);
}

function onCommentChange(event) {
setComment(event.currentTarget.commentValue);
}

function onSubmit(event) {
event.preventDefault();
table.createRecordAsync(
{'Task': taskName },
{'Comment': commentValue },
);
setTaskName('');
}

// check whether or not the user is allowed to create records with values in the primary field.
// if not, disable the form.
const isFormEnabled = table.hasPermissionToCreateRecord({
[table.primaryField.id]: undefined,
});
return (
<form onSubmit={onSubmit}>
<Box display="flex" padding={0}>
<FormField label="Add task!" padding={3}>
<Input
value={taskName}
placeholder="New task"
onChange={onInputChange}
disabled={!isFormEnabled}
width="50%"
/>
<Input
value={commentValue}
placeholder="Comment"
onChange={onCommentChange}
disabled={!isFormEnabled}
width="50%"
/>

<Button variant="light" type="submit" disabled={!isFormEnabled}>
Add!
</Button>
</FormField>
</Box>
</form>
);

0 Replies 0