Using this tutorial there is a small error that we got stuck on in part 4.
We ended up editing it this way I am sure something more elegant is what you guys had in mind. This is just an example.
function TodoBlock() {
// YOUR CODE GOES HERE
const base = useBase();
const globalConfig = useGlobalConfig();
const tableId = globalConfig.get('selectedTableId');
const completedFieldId = globalConfig.get('completedFieldId');
const table = base.getTableByIdIfExists(tableId);
const completedField = table ? table.getFieldByIdIfExists(completedFieldId) : null;
const toggle = (record) => {
table.updateRecordAsync(
record, {[completedFieldId]: !record.getCellValue(completedField)}
);
};
const records = useRecords(table);
const tasks = records && completedField ? records.map(record => (
<Task key={record.id} record={record} onToggle={toggle} completedFieldId={completedField} />
)) : null;
return (
<div>
<TablePickerSynced globalConfigKey="selectedTableId" />
<FieldPickerSynced table={table} globalConfigKey="completedFieldId" />
{tasks}
</div>
)
}
