version X: Context HOC - Uncaught TypeError: n.children is not a function

I am trying to create a HOC using Context and I am getting Uncaught TypeError: n.children is not a function

Here is the basic code

index.js:

import { render } from 'preact';
import MyProvider from 'context';
import Button from 'button';

render(
     <MyProvider color="red">
         <Button/>
    </MyProvider>,
    target
);

context.js

import { Component, createContext } from 'preact';

const context = createContext();

export default class MyProvider extends Component {
	render() {
		const { children, ...value } = this.props;
		return (
			<context.Provider value={value}>{children}</context.Provider>
		);
	}
}

// this is the part that is faling
export const withContext = (WrappedComponent) => {
    return class ContextConsumer extends Component {
      render() {
        return (<context.Consumer><WrappedComponent /></context.Consumer>);
      }
    }
}

button.js

import { Component } from 'preact';
import { withContext } from 'context';

class Button extends Component {
    render() {
        return (
            <button>test</button>
        );
    }
}

export default withContext(Buttonn);

[JoviDeCroock]

These are not equivalent, in the former you are relying on the render function of Consumer to be this:

render() {
  return this.props.render(context)
} 

while in the latter you are relying on this implementation:

render() {
  return this.props.children(context)
} 

[JoviDeCroock]

Because that is not a HOC, that’s a regular function for your case you’d need to do this:

export const wrapWithContext = (WrappedComponent) => {
  return (props) => <context.Consumer>{(ctx) => <WrappedComponent ctx={ctx} {...props} />}</context.Consumer>
}

You could also use the hooks API which allows you to just do this const value = useContext(context)