How can I Set State of a Value that is inside some other Function

Question

I am Trying to Create a React App That Detects Age of Pictures Using Clarifai API . I am Able to Console.Log Detected Age but I Want To Display The Age on My Webpage . Help me With Setting The AgeDectect State so I Can Use it on my Webpage

             //Value Displayed On Console
              //39

​

            //App.js Code That Console.Logs Age
              class App extends Component {
            constructor(){
             super();
             this.state = {
             input : '',
             imgURL : '',
             AgeDetect : ''
             }
            }

            onInputChange = (event) => {
              this.setState({input : event.target.value});
             }

            onClickEvent = () => {
              this.setState({imgURL : this.state.input})

              app.models.predict(Clarifai.DEMOGRAPHICS_MODEL ,
                                 this.state.input).then(
                      function(response) {
                           const A =response.outputs[0].data.regions[0].
                                  data.face.age_appearance.concepts[0].name
             //This Line of Code Displays Age on Console 
                                  console.log(A);
                                  this.setState({AgeDetect : A});
                             },
          //Having Problem SettingState ,this.state.AgeDetect isnt
                                                //doing anything
         render(){
                return (<AgeDetection AgeDetect={this.state.AgeDetect}/>
                      )
                   }
             //AgeDetection.js file      
      import React from 'react' ; 
      const AgeDetection = ({AgeDetect}) => {
      return(       
             <div>
              {AgeDetect}
             </div>
           );
         }
         export default AgeDetection;

Answer 1

Sort your array that is returned by the value and set the first object or the whole array to your state and then you can use it in your app very easily. Use an arrow function inside your predict then block to bind to the class.

class App extends Component {
  constructor() {
    super();
    this.state = {
      input: '',
      imgURL: '',
      AgeDetect: ''
    };
  }
  onInputChange = event => {
    this.setState({ input: event.target.value });
  };

  onClickEvent = () => {
    this.setState({ imgURL: this.state.input });
    app.models.predict(Clarifai.DEMOGRAPHICS_MODEL, this.state.input).then(
      response => {
        const A =
          response.outputs[0].data.regions[0].data.face.age_appearance
            .concepts[0].name;

        this.setState({ AgeDetect: A });
      },
      function(err) {
        // there was an error
      }
    );
  };

  render() {
    console.log(this.state);
    return (
      <div className='App'>
        <Navigation />
        <Logo />
        <ImageLinkForm
          onInputChange={this.onInputChange}
          onClickEvent={this.onClickEvent}
        />
        <FaceRecognition imgURL={this.state.imgURL} />
        <AgeDetection AgeDetect={this.state.AgeDetect} />
      </div>
    );
  }
}

export default App;