# Elasticsearch with React.js: match\_phrase

**URL:** <https://discuss.elastic.co/t/elasticsearch-with-react-js-match-phrase/298958>\
**Category:** Elasticsearch\
**Created:** [March 7, 2022, 11:09am UTC](https://discuss.elastic.co/t/elasticsearch-with-react-js-match-phrase/298958 "2022-03-07T11:09:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Karina\_Ivanova](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/karina_ivanova/32/102679_2.png) [@Karina\_Ivanova](https://discuss.elastic.co/u/Karina_Ivanova)\
**Post date:** [March 7, 2022, 11:09am UTC](https://discuss.elastic.co/t/elasticsearch-with-react-js-match-phrase/298958/1 "2022-03-07T11:09:16Z")

</div>

Hello,

I'm quite new to Elasticsearch and React and I'm trying to build an app that fetches .json data through API. Everything works fine but I can't get my head around two things: how to use [Match phrase query](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-match-query-phrase.html#query-dsl-match-query-phrase) and how to display a custom message when no matches were found in my app.  
I'm using the shakespeare.json file from elastic.

Here is the snippet of where, I suppose, I should insert the query:

```auto
const configurationOptions = {
    apiConnector: connector,

    searchQuery: {

        //Results: name of the play, its speaker, text entry, and speech number.
        result_fields: {
            play_name: {
                snippet: {
                    size: 35,
                    fallback: true
                }
            },
            speaker: {
                snippet: {
                    size: 50,
                    fallback: true
                }
            },
            text_entry: {
                snippet: {
                    size: 70,
                    fallback: true
                },
            },
            speech_number: {
                snippet: {
                    size: 50,
                    fallback: true
                }
            }
        }
    }
};

```

and here is the App component snippet, just in case:

```auto
function App() {
    return (
        <SearchProvider 
        config={configurationOptions}>
            <div className="App">
              <h1 className="heading">Shakespeare Work Library</h1>
                <Layout
                    header={<SearchBox 
                      inputProps={{ placeholder: "type a character name or a text line"}}/>}
                    bodyContent={
                      <Results 
                        titleField = "play_name"/>}
                        bodyHeader={
                        <> 
                          <PagingInfo/> 
                          <ResultsPerPage 
                          options = {[5, 10, 20]}
                          /> 
                        </>}
                        bodyFooter={< Paging />}
                />
            </div>
        </SearchProvider>
    );
}
export default App;

```

Any advice would be appreciated, thanks in advance!

---

<div class="post-metadata">

**Author:** ![casterQ](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/casterq/32/93257_2.png) [@casterQ](https://discuss.elastic.co/u/casterQ)\
**Post date:** [March 9, 2022, 10:23am UTC](https://discuss.elastic.co/t/elasticsearch-with-react-js-match-phrase/298958/2 "2022-03-09T10:23:34Z")

</div>

You need to know the `inverted index` first，then `match` query and finally `match_phrase`

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [April 6, 2022, 10:23am UTC](https://discuss.elastic.co/t/elasticsearch-with-react-js-match-phrase/298958/3 "2022-04-06T10:23:41Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.