Myujth

ReactJs displays the error:

Cannot read property setState of undefined.

I know that this question has been asked more often but most solutions I found do not address my current problem.

This code below was used to post files to server and it works fine. Now If I implement the code below immediately after the Axios response returns:

this.setState(
 filename:res.data.filename,
 message:res.data.message,
);

It will display said error. Please which setState do I need to bind

Here is the code

import React, Component from 'react';
import $ from 'jquery';
import axios, post from 'axios';

class FilePage extends React.Component 
 constructor(props) 
 super(props);
 this.state = 
 value:'', 
 filename:'',
 myfile:'',
 submitted: false
 ;

 this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);
 

 handleChange(event) 
 this.setState( [event.target.name]: event.target.value );
 

 handleSubmit(event) 
 event.preventDefault();
 this.setState( submitted: true );

 var formData = new FormData();
 formData.append('myfile', $('#myfile')[0].files[0]);
 formData.append('filename', $('#filename').val());

 axios
 .post('http://localhost/api.php', formData)
 .then(function (res) 
 console.log(res);
 this.setState(
 filename:res.data.filename,
 message:res.data.message,
 );
 )
 .catch(function (err) 
 console.log(err.message);
 );
 

 render() 
 const submitted = this.state;
 var style1 = 
 background: 'green',
 color: 'white',
 fontSize: 30
 ;

 return (
 <form onSubmit=this.handleSubmit id="myform">
 <label>
 <div style=style1> Testing Data </div>
 <input className="form-control" name="myfile" type="file" id="myfile" value=this.state.myfile onChange=this.handleChange />
 <b>filename:</b><input tyle="text" className="form-control" value=this.state.filename name="filename" onChange=this.handleChange />
 </label>
 <input className="btn btn-primary" type="submit" value="Submit" id="btn"/>
 </form>
 );
 

The scope inside the function(res) is changed. Try this instead.

axios.post('http://localhost/api.php', formData)
 .then((res) => {
 console.log(res);

 this.setState(
 filename:res.data.filename,
 message:res.data.message,

 );