Predicates

A predicate is a function for querying against a React element's tree. The following factories can be used for generating predicate clauses.

whereKey()

whereKey(value: React.Key | React.Key[]): Predicate

Find all elements where their key matches the provided value or values.

import { render, whereKey } from 'rut-dom';

const { root } = render(

<ItemList>

{items.map((item) => (

<Item key={item.id} item={item} />

))}

</ItemList>,

);

root.query(whereKey(123));

// Or

root.query(whereKey([123, 456]));

whereProps()

whereProps(props: { [name: string]: unknown }): Predicate

Find all elements in common with the provided props, regardless of component type.

import { render, whereProps } from 'rut-dom';

const { root } = render(

<ColorPalette>

<Color value="red" />

<Color value="blue" />

<Color value="green" />

</ColorPalette>,

);

root.query(whereProps({ value: 'red' }));