JS - React what does it mean this notation

Question

Hi i have a question about this notation:

export default DropTarget('answerSlot', spec, collect)(ItemSlot);

Just need to know what to search or what does it mean when after dropTarget() is another (className)

Full my code of this look like this:

import React from "react";
import {DropTarget} from "react-dnd";

interface IProps {
    children ?: any,
    connectDropTarget: (item: any) => any,
}

interface IStates {

}

const spec = {
    drop(props, monitor, component) {
        const item = monitor.getItem()
        console.log(monitor.getDropResult());
        props.onDrop(item);
        return item;
    },
};

const collect = (connect, monitor) => {
    return {
        connectDropTarget: connect.dropTarget(),
    };
};

class ItemSlot extends React.PureComponent<IProps, IStates> {


    render() {
        const { connectDropTarget } = this.props;
        return (
            connectDropTarget(
                <div style={{width: '200px', height: '50px', backgroundColor: 'blue'}} className={'m-1'}>
                {this.props.children}
            </div>,
            )
        );
    }
}

export default DropTarget('answerSlot', spec, collect)(ItemSlot);

Don't know the details but looks like `DropTarget` is a function you call with 3 arguments, its return type is another function that takes a class as an argument, then you call that with `ItemSlot` to return a class or a function component that has something extra on top of the raw `ItemSlot`. — M0nst3R, Jul 01 '20 at 08:43
Does this answer your question? [Understanding React Higher-Order Components](https://stackoverflow.com/questions/45935409/understanding-react-higher-order-components) — Bilal Akbar, Jul 01 '20 at 08:44
The `DropTarget` function returns another function. This is related to the concept of [currying](https://blog.bitsrc.io/understanding-currying-in-javascript-ceb2188c339). It is probably a [Higher-Order Component](https://reactjs.org/docs/higher-order-components.html), which basically wraps your ItemSlot component and enhances it in some way. — cbr, Jul 01 '20 at 08:44

Luke · Answer 1 · 2020-07-01T08:52:24.957

This is a higher order function, which is quite good explained here https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99

TL;DR; it basically is a function that returns another function. It is useful to preinitialize a function with some information that are then enclosed within the scope of the higher order function. In React there is also the concept of higher order function and is called higher order components, where you can compose components end preinitialize them with some specific functionality

Imagine this

const HelloWorld = ({ lang }) => <div>Hello world {lang}</div>

const withLang = lang
      => Component 
      => props 
      => <Component {...props} lang={lang} />

// here we enhance the HelloWorld component with a default lang of EN
// now HelloWorldEn will always output Hello world en
const HelloWorldEn = withLang(en)(HelloWorld)

The benefit of higher order functions is that you can reuse them with other components.

Another usecase I find good for explanation is following

const languageFilter = lang => predicate => predicate.language === lang

const list = [{ name: "test", language: "en"}, {name: "foo", language: "de"}] 

list.filter(languageFilter("en"))

JS - React what does it mean this notation

1 Answers1