React

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      bar: { foo1: null, foo2: null, foo3: null }
    }
  }
  
  sortData() {
    let base64image = "some base64 image"
    let message = {
      image: base64Image
    }

    fetch('http://localhost:5000/', {
      method: 'post',
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        'Access-Control-Allow-Origin': '*'
      },
      body: JSON.stringify(message)
    })
      .then((response) => {
      return response.json();  
    })
      .then((data) => {
      this.setState( {
        bar: {
          foo1: (data.prediction.foo1.toFixed(3)),
          foo2: (data.prediction.foo2.toFixed(3)),
          foo3: (data.prediction.foo3.toFixed(3)),
        }
      })

      let top3 = Array.from(data.prediction)
      // .map((i, p) =>{
      //   return {
      //     barName: bar[i],
      //     prediction: p
      //   };
      // })
      .sort( (a, b) => {
        return b.prediction - a.prediction;
      }).slice(0, 3)
      //.max(data.prediction); // Alernate for slice and sorting
      
      });
     }
   
  render() {
    return (
      <div>
        <button onClick={this.sortData}>Sort</button>
           <p>foo1: {this.state.bar.foo1} </p>
           <p>foo2:   {this.state.bar.foo2} </p>
           <p>foo3:    {this.state.bar.foo3}</p>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))