Separate screens

package.json

@@ -11,7 +11,9 @@
 		"@teachablemachine/image": "^0.8.4",
 		"@tensorflow/tfjs": "^3.2.0",
 		"blueimp-load-image": "^5.14.0",
+		"bootstrap": "^4.6.0",
 		"react": "16.13.1",
+		"react-bootstrap": "^1.5.1",
 		"react-dom": "16.13.1",
 		"react-scripts": "3.4.3"
 	},

src/App.js

@@ -1,49 +1,38 @@
 import React from 'react'
+import Upload from './components/upload'
+import Results from './components/results'
 import { predict } from './helpers/helpers'
+
 var loadImage = require('blueimp-load-image')
 
 export default class App extends React.Component {
 	state = {
-		data: [],
+		results: [],
 	}
 
 	handleFiles = (e) => {
 		loadImage(
 			e.target.files[0],
 			async (img) => {
-				this.setState({ data: await predict(img) })
+				this.setState({ results: await predict(img) })
 			},
 			{ maxWidth: 600 } // Options
 		)
 	}
+	handleback = () => {
+		this.setState({ results: [] })
+	}
 
 	render() {
-		if (Object.keys(this.state.data).length) {
-			const list = this.state.data.sort()
+		if (Object.keys(this.state.results).length) {
 			return (
-				<div className="App">
-					<input
-						type="file"
-						accept="image/*"
-						onChange={this.handleFiles}
-					/>
-					{list.map((o, index) => (
-						<p>
-							{o.className} : {o.probability.toFixed(2)}
-						</p>
-					))}
-				</div>
+				<Results
+					handleback={this.handleback}
+					results={this.state.results}
+				/>
 			)
 		} else {
-			return (
-				<div className="App">
-					<input
-						type="file"
-						accept="image/*"
-						onChange={this.handleFiles}
-					/>
-				</div>
-			)
+			return <Upload handleFiles={this.handleFiles} />
 		}
 	}
 }

src/components/results.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Button from 'react-bootstrap/Button'
+
+export default class Results extends React.Component {
+	render() {
+		const list = this.props.results.sort()
+		return (
+			<div className="App">
+				<Button variant="primary" onClick={this.props.handleback}>
+					Back
+				</Button>
+				{list.map((o, index) => (
+					<p>
+						{o.className} : {o.probability.toFixed(2)}
+					</p>
+				))}
+			</div>
+		)
+	}
+}

src/components/upload.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default class Upload extends React.Component {
+	render() {
+		return (
+			<div className="App">
+				<input
+					type="file"
+					accept="image/*"
+					onChange={this.props.handleFiles}
+				/>
+			</div>
+		)
+	}
+}