Anonymous class in React

Question

I have heard about anonymous function but the concept of Annynomous class is new to me. for example we have an HOC here which looks like this.

import React, { Component } from 'react';

const withClass = (WrappedComponent, className) => {
   return class extends Component {
     render () {
          return (
               <div className={className}>
                   <WrappedComponent {...this.props} />
             </div>
         )
       }
   }
}

[Question] Here, I am unable to understand meaning of this line return class extends Component { (I know the extends component from React, {component})

Can someone explain me what it does generally? if the description is very vague or brief then do let me know.

Answer 1

Here, I am unable to understand meaning of this line return class extends Component {

Can someone explain me what it does generally?

It defines a class that has no name and returns it from the withClass function.

That is, it does this, but all in one expression and without giving the class a name:

import React, { Component } from 'react';

const withClass = (WrappedComponent, className) => {
   class TheClass extends Component {
     render () {
          return (
               <div className={className}>
                   <WrappedComponent {...this.props} />
             </div>
         )
       }
   }
   return TheClass;
}

You might use it like this:

const MyClass = withClass(SomeComponent, "foo");

...which you can then use like this:

<MyClass foo="bar"/>

...and you'll get

<div className="foo">
    <SomeComponent foo="bar" />
</div>

...when it is rendered.