Cacher is the code snippet organizer for pro developers

import React from 'react';
import Webcam from 'react-webcam';
import axios from 'axios'
import { DisplayResult } from './DisplayResult.js'
export class WebcamCapture extends React.Component {

  constructor(props) {
    super(props);

    this.state = { result:'',imgSrc: '' };
    this.capture = this.capture.bind(this);
  }

  setRef = (webcam) => {
    this.webcam = webcam;
  }

  capture = () => {
    var self = this;
    axios.post("http://localhost:5000/recognize", {
      image:this.webcam.getScreenshot()
    })
    .then(function (response){
      console.log(response);
      if(response.data.success == true)
      {
        //alert(response.data.emotion);
        self.setState({result: response.data.emotion});
      }
      else {
        self.setState({result: "Face not found :("});
      }
    })
    .catch(function (error){
      console.log(error);
    });
  };

  apiTest = () => {
    axios
      .get("http://localhost:5000/hello")
      .then(res => alert(res.data.msg))
      .catch(err => console.log(err))
  };

  render() {
    var result = '';
    if(this.state.result !== '')
    {
        result = <DisplayResult result={this.state.result} /> ;
    }
    console.log(result)
    return (
      <div>
      <div>
        <Webcam
          audio={false}
          height={600}
          ref={this.setRef}
          screenshotFormat="image/jpeg"
          width={800}
        />
      </div>
      <div>
        <button onClick={this.capture}>Capture photo</button>
      </div>
      <div>
      {this.state.imgSrc}
      {result}
      </div>
    </div>
    );
  }
}