Camera linked with game

src/App.js

@@ -16,13 +16,12 @@ class App extends Component {
       },
       matchId: 1
     }
+    this.updateMatch = this.updateMatch.bind(this)
   }
 
   updateMatch = (e) => {
     this.setState({
-      match: e
-    })
-    this.setState({
+      match: e,
       matchId: this.state.matchId + 1
     })
   }

src/components/AiCamera.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import * as tmImage from '@teachablemachine/image'
 import loadVideo from '../utilities/camera'
 
-function AiCamera()  {
+function AiCamera(props)  {
 
   // the link to your model provided by Teachable Machine export panel
   // without empty class
@@ -33,7 +33,7 @@ function AiCamera()  {
 
   // registers players mark and plays a turn
   async function makeMove() {
-    this.props.handlePlay("Paper")
+    props.handlePlay("Paper")
   }
 
 
@@ -63,12 +63,12 @@ function AiCamera()  {
 
   return (
     <div>
-    <button onClick={predictVideo}>Ennusta</button>
+    <button onClick={makeMove}>Ennusta</button>
       <video alignment="middle" id="userWebCam"></video>
       <ul>
         {results.map(({ className, probability }) => (
           <li key={className}>
-            {`${className}: %${(probability * 100).toFixed(2)}`}
+            {`${className}: ${(probability * 100).toFixed(2)}%`}
           </li>
         ))}
       </ul>