Merge #395

395: Change react playground to function component r=bidoubiwa a=bidoubiwa

We mixed two component styles. This PR make our playground code more consistent

Co-authored-by: Charlotte Vermandel <[email protected]>

Author: bors[bot]

playgrounds/react/src/App.js

@@ -1,5 +1,5 @@
 import 'instantsearch.css/themes/algolia-min.css'
-import React, { Component } from 'react'
+import React from 'react'
 import {
   InstantSearch,
   InfiniteHits,
@@ -22,59 +22,50 @@ const searchClient = instantMeiliSearch(
   }
 )
 
-class App extends Component {
-  render() {
-    return (
-      <div className="ais-InstantSearch">
-        <h1>MeiliSearch + React InstantSearch</h1>
-        <h2>
-          Search in Steam video games{' '}
-          <span role="img" aria-label="emoji">
-            🎮
-          </span>
-        </h2>
-        <p>
-          This is not the official Steam dataset but only for demo purpose.
-          Enjoy searching with MeiliSearch!
-        </p>
-        <InstantSearch
-          indexName="steam-video-games"
-          searchClient={searchClient}
-        >
-          <Stats />
-          <div className="left-panel">
-            <ClearRefinements />
-            <h2>Genres</h2>
-            <RefinementList attribute="genres" />
-            <h2>Players</h2>
-            <RefinementList attribute="players" />
-            <h2>Platforms</h2>
-            <RefinementList attribute="platforms" />
-            <h2>Misc</h2>
-            <RefinementList attribute="misc" />
-            <Configure hitsPerPage={6} />
-          </div>
-          <div className="right-panel">
-            <SearchBox />
-            <InfiniteHits hitComponent={Hit} />
-          </div>
-        </InstantSearch>
+const App = () => (
+  <div className="ais-InstantSearch">
+    <h1>MeiliSearch + React InstantSearch</h1>
+    <h2>
+      Search in Steam video games{' '}
+      <span role="img" aria-label="emoji">
+        🎮
+      </span>
+    </h2>
+    <p>
+      This is not the official Steam dataset but only for demo purpose. Enjoy
+      searching with MeiliSearch!
+    </p>
+    <InstantSearch indexName="steam-video-games" searchClient={searchClient}>
+      <Stats />
+      <div className="left-panel">
+        <ClearRefinements />
+        <h2>Genres</h2>
+        <RefinementList attribute="genres" />
+        <h2>Players</h2>
+        <RefinementList attribute="players" />
+        <h2>Platforms</h2>
+        <RefinementList attribute="platforms" />
+        <h2>Misc</h2>
+        <RefinementList attribute="misc" />
+        <Configure hitsPerPage={6} />
       </div>
-    )
-  }
-}
-
-function Hit(props) {
-  return (
-    <div key={props.hit.id}>
-      <div className="hit-name">
-        <Highlight attribute="name" hit={props.hit} />
+      <div className="right-panel">
+        <SearchBox />
+        <InfiniteHits hitComponent={Hit} />
       </div>
-      <img src={props.hit.image} align="left" alt={props.hit.name} />
-      <div className="hit-info">price: {props.hit.price}</div>
-      <div className="hit-info">release date: {props.hit.releaseDate}</div>
+    </InstantSearch>
+  </div>
+)
+
+const Hit = ({ hit }) => (
+  <div key={hit.id}>
+    <div className="hit-name">
+      <Highlight attribute="name" hit={hit} />
     </div>
-  )
-}
+    <img src={hit.image} align="left" alt={hit.name} />
+    <div className="hit-info">price: {hit.price}</div>
+    <div className="hit-info">release date: {hit.releaseDate}</div>
+  </div>
+)
 
 export default App