# How I can use the highlighter in react app

**URL:** <https://discuss.elastic.co/t/how-i-can-use-the-highlighter-in-react-app/283494>\
**Category:** Elasticsearch\
**Created:** [September 7, 2021, 6:48am UTC](https://discuss.elastic.co/t/how-i-can-use-the-highlighter-in-react-app/283494 "2021-09-07T06:48:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Drsaud](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/drsaud/32/94000_2.png) [@Drsaud](https://discuss.elastic.co/u/Drsaud)\
**Post date:** [September 7, 2021, 6:48am UTC](https://discuss.elastic.co/t/how-i-can-use-the-highlighter-in-react-app/283494/1 "2021-09-07T06:48:18Z")

</div>

Hi, I want to ask how to apply the highlighter in my react app because when I tried it says its not parameter, I try it on my get req

```auto

axios

        .get(

          `http://localhost:9200/ncar_index/ncar/_search?q=${event.target.value} AND ${this.state.search_query_drop}&size=100&sort=date:desc&default_operator=AND`

        )

```

---

<div class="post-metadata">

**Author:** ![spinscale](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spinscale/32/25011_2.png) [@spinscale](https://discuss.elastic.co/u/spinscale)\
**Post date:** [September 7, 2021, 7:27am UTC](https://discuss.elastic.co/t/how-i-can-use-the-highlighter-in-react-app/283494/2 "2021-09-07T07:27:24Z")

</div>

Instead of using request parameters, you should switch to using the [Query DSL](https://www.elastic.co/guide/en/elasticsearch/reference/7.14/query-dsl.html), so that you can specify your request including highlighting in JSON - this also means you do not need to worry about HTTP encoding and escaping in your queries.

---

<div class="post-metadata">

**Author:** ![Drsaud](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/drsaud/32/94000_2.png) [@Drsaud](https://discuss.elastic.co/u/Drsaud)\
**Post date:** [September 7, 2021, 11:49am UTC](https://discuss.elastic.co/t/how-i-can-use-the-highlighter-in-react-app/283494/3 "2021-09-07T11:49:07Z")

</div>

Hi again Mr. [Alexander Reelsen](https://discuss.elastic.co/u/spinscale),

I had no idea about the Query DSL, can it be written in React.js directly?

---

<div class="post-metadata">

**Author:** ![Diana1](https://avatars.discourse-cdn.com/v4/letter/d/7c8e57/32.png) [@Diana1](https://discuss.elastic.co/u/Diana1)\
**Post date:** [September 9, 2021, 6:32am UTC](https://discuss.elastic.co/t/how-i-can-use-the-highlighter-in-react-app/283494/4 "2021-09-09T06:32:08Z")

</div>

Hi, Saud AlBallaa!  
Did you succeed highlighting in react? I am trying to do the same thing... 🙃

---

<div class="post-metadata">

**Author:** ![Drsaud](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/drsaud/32/94000_2.png) [@Drsaud](https://discuss.elastic.co/u/Drsaud)\
**Post date:** [September 14, 2021, 8:04am UTC](https://discuss.elastic.co/t/how-i-can-use-the-highlighter-in-react-app/283494/6 "2021-09-14T08:04:16Z")

</div>

Hi Diana,

I didn't try yet to be honest, but I'm willing to do so if I succeed I will send you a message or reply to this.

---

<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:** [October 12, 2021, 8:05am UTC](https://discuss.elastic.co/t/how-i-can-use-the-highlighter-in-react-app/283494/7 "2021-10-12T08:05:08Z")

</div>

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