CODEWITHSUNDEEP
javascriptreactjs
anshul
anshul

Reputation: 17

React is taking setstate as a function

I am using Machine Learning Face Detection API from a website called "clarifai", Though in my react App.js folder there is an issue, and the error says, "TypeError: this.setstate is not a function ". I am attaching a link to an image of my React localhost.React localhost screenshot

Actually, I am a beginner in react and trying to build a basic react website and embedding Machine learning API to detect faces when a user tries to enter an image link. Any help would be much appreciated !

import React, { Component } from 'react';
import Navigation from './Components/Navigation/Navigation';
import FaceRecognition from './Components/FaceRecognition/FaceRecognition';
import Clarifai from 'clarifai';
import Logo from './Components/Logo/Logo';
import ImageLinkForm from './Components/ImageLinkForm/ImageLinkForm';
import Rank from './Components/Rank/Rank';
import Particles from 'react-particles-js';
import './App.css';

const app = new Clarifai.App({
 apiKey: 'API_KEY'
});

const particlesOptions = {
  particles: {
    number: {
      value:100,
      density: {
        enable: true,
        value_area:800
      }

    }
  }
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      input:'',
      imageUrl:'',
      box: {},
    }
  }
 
 calculateFaceLocation = (data) =>{
      const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box
      const image = document.getElementById('inputimage');
      const width = Number(image.width);
      const height = Number(image.height);
      return{
        leftCol: clarifaiFace.left_col * width,
        topRow : clarifaiFace.top_row * height,
        rightCol : width - (clarifaiFace.right_col * width),
        bottomRow : height - (clarifaiFace.bottom_row * height)


      }
 }

  displayFaceBox = (box)  => {
  console.log(box);
    this.setState = ({box: box})
  }
  onInputChange = (event) => {
    this.setState({input: event.target.value});
  }
  onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input});
          app.models
          .predict(Clarifai.FACE_DETECT_MODEL, 
           this.state.input)
          .then(response => this.displayFaceBox(this.calculateFaceLocation(response)))           
          .catch(err => console.log(err));
  }
  render() {
    return (
      <div className="App">
          <Particles className='particles'
                  params={particlesOptions}
            />
          <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm 
        onInputChange={this.onInputChange} 
        onButtonSubmit={this.onButtonSubmit}/>
        <FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl}/>

      </div>
    );
  }
}

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Upvotes: 0

Views: 126

Answers (2)

Shubham Gupta
Shubham Gupta

Reputation: 2646

Make following changes in your code and see if it works.

Change

this.setState = ({box: box})

To

this.setState({box})

Upvotes: 0

larz
larz

Reputation: 5766

Call the setState function, don't change its definition

  displayFaceBox = (box)  => {
    console.log(box);
    // you can also use object short hand, instead of {box: box}
    this.setState({box});
  }

Upvotes: 1

Related Questions