# react$

The `react$` command is a useful command to query React Components by their actual name and filter them by props and state.

info

The command only works with applications using React v16.x. Read more about React selectors in the [Selectors](/docs/selectors.md#react-selectors) guide.

## Usage[​](#usage "Direct link to Usage")

```
await $(selector).react$(selector, { props, state })
```

## Parameters[​](#parameters "Direct link to Parameters")

| Name                            | Type                                          | Details                                |
| ------------------------------- | --------------------------------------------- | -------------------------------------- |
| `selector`                      | `string`                                      | of React component                     |
| `options`<br />*optional*       | `ReactSelectorOptions`                        | React selector options                 |
| `options.props`<br />*optional* | `Object`                                      | React props the element should contain |
| `options.state`<br />*optional* | `Array<any>, number, string, object, boolean` | React state the element should be in   |

## Example[​](#example "Direct link to Example")

pause.js

```
it('should calculate 7 * 6', async () => {
    await browser.url('https://ahfarmer.github.io/calculator/');
    const appWrapper = await browser.$('div#root')

    await browser.react$('t', {
        props: { name: '7' }
    }).click()
    await browser.react$('t', {
        props: { name: 'x' }
    }).click()
    await browser.react$('t', {
        props: { name: '6' }
    }).click()
    await browser.react$('t', {
        props: { name: '=' }
    }).click()

    console.log(await $('.component-display').getText()); // prints "42"
});
```

## Returns[​](#returns "Direct link to Returns")

* **\<WebdriverIO.Element>**