Functions are not valid as a React child. This may happen if you return a Component instead from render

Question

[Updated] before someone marks this as duplicate, i find the answer to be sort of vague and brief

Functions are not valid as a React child. This may happen if you return a Component instead of from render

I have a react component like this

import React, { Component} from 'react';
import axios from 'axios';
import Modal from '../../component/UI/modal/modal.js'
import Aux from '../Aux.js'

const ErrorHandler = (WrappedComponent, axios) => {
  return class extends Component {
      state = {
        error:null
      }

    componentDidMount () {
      axios.interceptors.request.use(req => {
        this.setState({error:null})
      });
      axios.interceptors.response.use(req => {
        console.log(req)
      }, error => {
        this.setState({error:error})
      });
    }

    errorConfirmedHandler = () => {
      this.setStae({error: null})
    }

    render() {
      return (
        <Aux>
          <Modal
          order={this.state.error}>
          purchasingHandlerClose={this.errorConfirmedHandler }
            {this.state.error ? this.state.error.message : null}
          </Modal>
        <WrappedComponent {...this.props} />
      </Aux>
      );
    }
  }
}

export default ErrorHandler;

this is my modal component which might be causing the problem

import React, { Component } from 'react';
import Classes from './modal.css'
import Aux from '../../../HOC/Aux.js'
import Backdrop from '../Backdrop/backdrop.js'

class Modal extends Component {
  shouldComponentUpdate(nextProps, nextState) {

    return  nextProps.order !== this.props.order || nextProps.children !== this.props.children;
  }

  render () {
    console.log(this.props.children)
    return (
      <Aux>
      <Backdrop show={this.props.order} purchasingHandlerClose={this.props.purchasingHandlerClose} />
    <div className={Classes.Modal} style={{display: this.props.order ? 'block' : 'none'}}>
      {this.props.children}
    </div>
    </Aux> )
  }
}

export default Modal;

I am seeing the following error in my console

Functions are not valid as a React child. This may happen if you return a Component instead of from render

[Question] Can someone explain me what causes this error as someone down voted and wrote a comment saying the code responsible is not here (and then he deleted his comment) since the post would be too long if paste everything here hence looking for someone who can just explain me this error)

Answer 1

Found the mistake in

import React, { Component} from 'react';
import axios from 'axios';
import Modal from '../../component/UI/modal/modal.js'
import Aux from '../Aux.js'

const ErrorHandler = (WrappedComponent, axios) => {
  return class extends Component {
      state = {
        error:null
      }

    componentDidMount () {
      axios.interceptors.request.use(req => {
        this.setState({error:null})
      });
      axios.interceptors.response.use(req => {
        console.log(req)
      }, error => {
        this.setState({error:error})
      });
    }

    errorConfirmedHandler = () => {
      this.setStae({error: null})
    }

    render() {
      return (
        <Aux>
          <Modal
          order={this.state.error}>
          purchasingHandlerClose={this.errorConfirmedHandler }
            {this.state.error ? this.state.error.message : null}
          </Modal>
        <WrappedComponent {...this.props} />
      </Aux>
      );
    }
  }
}

export default ErrorHandler;

I should have done

 <Modal
          order={this.state.error}
          purchasingHandlerClose={this.errorConfirmedHandler }>

but I accidentally did this ( notice the > )

 <Modal
          order={this.state.error}>
          purchasingHandlerClose={this.errorConfirmedHandler }