function argument in component's constructor in react.js

Question

When I look at the following line in this example:

const SortableItem = SortableElement(({value}) => <li>{value}</li>);

then I don't understand where is the lambda function ({value}) => <li>{value}</li> used in SortableElement ?

Can someone please enlighten me ?

SortableElement's code:

import React, {Component, PropTypes} from 'react';
import {findDOMNode} from 'react-dom';
import invariant from 'invariant';

// Export Higher Order Sortable Element Component
export default function SortableElement (WrappedComponent, config = {withRef: false}) {
    return class extends Component {
        static displayName = (WrappedComponent.displayName) ? `SortableElement(${WrappedComponent.displayName})` : 'SortableElement';
        static WrappedComponent = WrappedComponent;
        static contextTypes = {
            manager: PropTypes.object.isRequired
        };
        static propTypes = {
            index: PropTypes.number.isRequired,
            collection: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
            disabled: PropTypes.bool
        };
        static defaultProps = {
            collection: 0
        };
        componentDidMount() {

            let {collection, disabled, index} = this.props;

            if (!disabled) {
                this.setDraggable(collection, index);
            }
        }
        componentWillReceiveProps(nextProps) {
            const {index} = this.props;
            if (index !== nextProps.index && this.node) {
                this.node.sortableInfo.index = nextProps.index;
            }
            if (this.props.disabled !== nextProps.disabled)
            {
                let {collection, disabled, index} = nextProps;
                if (disabled) {
                    this.removeDraggable(collection);
                }
                else {
                    this.setDraggable(collection, index);
                }
            }
        }
        componentWillUnmount() {
            let {collection, disabled} = this.props;

            if (!disabled) this.removeDraggable(collection);
        }
        setDraggable(collection, index){
            let node = this.node = findDOMNode(this);

            node.sortableInfo = {index, collection};

            this.ref = {node};
            this.context.manager.add(collection, this.ref);
        }
        removeDraggable(collection) {
            this.context.manager.remove(collection, this.ref);
        }
        getWrappedInstance() {
            invariant(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableElement() call');
            return this.refs.wrappedInstance;
        }
        render() {
            const ref = (config.withRef) ? 'wrappedInstance' : null;
            return (
                <WrappedComponent ref={ref} {...this.props} />
            );
        }
    }
}

Piotr Berebecki · Answer 1 · 2016-10-06T07:39:02.803

1

Thanks to ({value}) => <li>{value}</li> in
const SortableItem = SortableElement(({value}) => <li>{value}</li>);
we will be actually rendering an li element with a value passed as a prop from the map method below.

const SortableList = SortableContainer(({items}) => {
    return (
        <ul>
            {items.map((value, index) =>
                <SortableItem key={`item-${index}`} index={index} value={value} />
            )}
        </ul>
    );
});

In the context of the SortableElement's API code the important thing is that it renders the WrappedComponent (lines 67-69). We can treat SortableElement as any other Higher Order Component - a component that wraps another component to deliver some extra functionality. In this case - a fancy sorting animation of the lambda function.

edited Oct 06 '16 at 07:39

answered Oct 05 '16 at 23:27

Piotr Berebecki

7,428
4
33
42

Thanks ! That kinda makes sense but how can you tell that this is what is going to happen ? I cannot really see this from SortableElement's code. – jhegedus Oct 05 '16 at 23:37
1

I've just added some more clarification. I hope it helps. This should also be useful: https://www.sitepoint.com/react-higher-order-components/ – Piotr Berebecki Oct 06 '16 at 00:08
Thanks ! So the WrappedComponent variable is actually the passed lambda ? – jhegedus Oct 06 '16 at 07:16
1

Yes, and the `SortableElement` just `wraps` it. – Piotr Berebecki Oct 06 '16 at 07:25

Diego Zacarias · Accepted Answer · 2016-10-06T05:59:01.147

export default function SortableElement (WrappedComponent, config = {withRef: false}) {
  return class extends Component {

    ...

    render() {
      const ref = (config.withRef) ? 'wrappedInstance' : null;
      return (
        <WrappedComponent ref={ref} {...this.props} />
      );
    }
  }
}

Look at the render() method in the returned React Component by the higher order SortableElement function, the lambda function (which is a stateless component) is passed as the first argument to the higher order function, and this first argument is going to end up as being the parameter WrappedComponent you see in the signature of this higher order function.

So this higher order function is going to spit a React component with a render() method that uses/calls your actual React component that you just passed in (the lambda function).

<WrappedComponent ref={ref} {...this.props} />

To get access to the wrapped component from the parent using the `getWrappedInstance` method. — Diego Zacarias, Oct 06 '16 at 07:40

Guichi · Answer 3 · 2016-10-06T08:47:16.223

1

Put simply ({value}) => <li>{value}</li> is a short hand for

React.crateClass({
    render:function(){
        return <li>{this.props.value}</li> 
    }
})

refer to pure functional component in React

and SortableElement is a higher order component wrapping another React component ,such the functional component above

edited Oct 06 '16 at 08:47

answered Oct 06 '16 at 05:54

Guichi

2,150
1
19
27

note that `({value}) =>
{value}
{value}

jhegedus

Oct 06 '16 at 14:57

function argument in component's constructor in react.js

3 Answers3

Linked