docs: migrate example to JSX

algolia · Jan 21, 2021 · a725011 · a725011
1 parent cb3b47f
commit a725011
Showing 1 changed file with 21 additions and 12 deletions.
diff --git a/packages/website/docs/state.md b/packages/website/docs/state.md
@@ -52,24 +52,33 @@ You can also manually update the state using setters. It's useful to implement c
 For example, let's say you want to let users fill the search input with the value of a suggestion by clicking or tapping it. You can use the [`setQuery`](state#setquery) setter provided by [`getSources`](sources#getsources) to attach an event when clicking the tap-ahead button and manually set the query.
 
 ```js
+/** @jsx h */
+import { h } from 'preact';
+import { autocomplete } from '@algolia/autocomplete-js';
+
 autocomplete({
   // ...
-  getSources({ query, setQuery, refresh }) {
+  getSources({ setQuery, refresh }) {
     return [
       {
         // ...
         templates: {
-          item({ item, root }) {
-            const tapAheadButton = document.createElement('button');
-
-            tapAheadButton.addEventListener('click', (event) => {
-              event.stopPropagation();
-
-              setQuery(item.query);
-              refresh();
-            });
-
-            root.appendChild(tapAheadButton);
+          item({ item }) {
+            return (
+              <div>
+                <div>{item.query}</div>
+                <button
+                  onClick={(event) => {
+                    event.stopPropagation();
+
+                    setQuery(item.query);
+                    refresh();
+                  }}
+                >
+                  Fill query
+                </button>
+              </div>
+            );
           },
         },
       },