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>
);
