`useRowState`

The useRowState hook returns a Row and a function to set it, following the same pattern as React's useState hook.

useRowState(
  tableId: string,
  rowId: string,
  storeOrStoreId?: StoreOrStoreId,
): [Row, (row: Row) => void]

	Type	Description
`tableId`	`string`	The `Id` of the `Table` in the `Store`.
`rowId`	`string`	The `Id` of the `Row` in the `Table`.
`storeOrStoreId?`	`StoreOrStoreId`	The `Store` to be accessed: omit for the default context `Store`, provide an `Id` for a named context `Store`, or provide an explicit reference.
returns	`[Row, (row: Row) => void]`	An array containing the `Row` and a function to set it.

This is a convenience hook that combines the useRow and useSetRowCallback hooks. It's useful when you need both read and write access to a Row in a single component.

A Provider component is used to wrap part of an application in a context, and it can contain a default Store or a set of Store objects named by Id. The useRowState hook lets you indicate which Store to use: omit the final parameter for the default context Store, provide an Id for a named context Store, or provide a Store explicitly by reference.

Example

This example creates a Store outside the application, which is used in the useRowState hook by reference. A button updates the Row when clicked.

import {createStore} from 'tinybase';
import React from 'react';
import {createRoot} from 'react-dom/client';
import {useRowState} from 'tinybase/ui-react';

const store = createStore().setTable('t1', {r1: {c1: 'Alice', c2: 30}});
const App = () => {
  const [row, setRow] = useRowState('t1', 'r1', store);
  return (
    <div>
      {JSON.stringify(row)}
      <button onClick={() => setRow({...row, c2: (row.c2 || 0) + 1})}>
        Birthday
      </button>
    </div>
  );
};

const app = document.createElement('div');
const root = createRoot(app);
root.render(<App />);
console.log(app.innerHTML);
// -> '<div>{\"c1\":\"Alice\",\"c2\":30}<button>Birthday</button></div>'

const _button = app.querySelector('button');
// -> _button MouseEvent('click', {bubbles: true})
console.log(app.innerHTML);
// -> '<div>{\"c1\":\"Alice\",\"c2\":31}<button>Birthday</button></div>'

Since

v7.3.0