React Passing state from child to parent

Question

I have a file upload widget which once a file is uploaded successfully it should change the state in the parent to then switch the component to 'processing'.

However my code in its current state gives the error:

Expected an assignment or function call and instead saw an expression no-unused-expressions

How can I update the state of the parent (UploadRequired) from the fileUploadWidget on a successful upload?

Parent:

class UploadRequired extends Component {

    constructor(props) {
        super(props);
        this.state = {status: ""};
        this.handler = this.handler.bind(this);
      }

      handler() {
        this.setState({
           state: "0"
        });
    }
       componentWillReceiveProps = props => {
        this.setState({ status : props.dataRow });
}

    render() {

        var button = <div></div>;

        if(this.state.status == ""){
                button = <FileUploadWidget file={this.props.file} payrollID={this.props.payrollID} action={this.handler}/>;
              }

              if(this.state.status == "0"){
                button = <ProcessWidget />;
              }
              if(this.state.status == "1"){
                button = <ProcessingWidget />;
              }
              if(this.state.status == "2"){
                button = <ProcessedWidget />;
              }
        return(
            <div>
            {button}
            </div>
        )
    }
}
export default UploadRequired;

Child:

class FileUploadWidget extends Component {

    constructor(props, context) {
        super(props, context);
    }
    componentDidMount() {

        var self=this;
        let fileName = this.props.file
        let payrollID = this.props.payrollID
        const inputElement = document.getElementById(this.props.file);
        if(inputElement){
        inputElement.addEventListener("change", handleFiles, true);
    }

    function handleFiles() {

        var self=this;
        const fileList = this.files; 
        const uri = "http://*******/fileupload.php";
        const xhr = new XMLHttpRequest();
        const fd = new FormData();

        xhr.open("POST", uri, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {

            // Error line here
               this.props.action
            }
            if (xhr.readyState == 4 && xhr.status == 400) {
              alert(xhr.responseText); 
            }
        };
        xhr.send(fd);
      }
      }

    render() {


        return (
            <div>
                <input type="file" id={this.props.file}></input> 
            </div>
        )
    }
}

Answer 1

Well, this.props.action is just the handler function, don't you need this.props.action()?

You'll also want to bind handler so that this works when it's called: this.handler.bind(this) or pass a lambda to the subcomponent action={() => this.handler()}

Answer 2

const self = this;
const promise1 = new Promise(function(resolve, reject) {
  resolve(()=>{
 return  self.props.action()
})
});

await promise1()

console.log(promise1);