Component state

Component state allows for interaction across different components in a view.

Register component state

Use the auto-generated id returned by the useComponentState to register the component into the global component state.
tsx
Copied
1
const { id, selectedRow } = useComponentState();
2
return <Table id={id} data={data} />;
You can also specify the id for components for cases when you need descriptive ids.
tsx
Copied
1
// OK
2
const { selectedRow } = useComponentState("my-table");
3
return <Table id="my-table" data={data} />;
4
5
// Better as it's easier to keep ids in sync
6
const { id, selectedRow } = useComponentState("my-table");
7
return <Table id={id} data={data} />;

Access component state

Retrieve the component state from the return value of useComponentState.
The following example accesses the selectedRow field on a Table's component state and uses it to render a piece of text. Try clicking on a row. See that the selected row from the component state is rendered beneath the table.
Loading view...

Mutate component state

You can also call functions that mutate the state.
The following example has a Button that appends the string "Howdy!" to the text input's value. Try clicking the button.
Loading view...