如何将prop传递给ReactJS中const中描述的组件

Question

I'm using the react-sortable-hoc library to sort my list of items. More than just listing I need to run a functionality when clicking the single item. Listing and sorting and everything is working fine. How can I pass a props that should be called clickFunction() which consoles the name when I click the name listed through SortableItem ?

import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

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

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

class Details extends React.Component {

    clickFunction(name) {
        console.log(name)
    }

    onSortEnd({oldIndex, newIndex}) {
        this.setState({
          testlist: arrayMove(this.state.testlist, oldIndex, newIndex),
        });
    };

    render() {
        return (
            <div>
                <SortableList items={this.state.testlist} onSortEnd={this.onSortEnd.bind(this)} pressDelay="200" />
            </div>
        )
    }
}

Answer 1

You can pass the function from Details component and receive it in props of the SortableList and SortableItem like

import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value, clickFunction}) => <li onClick={() => clickFunction(value)}>{value.first_name}</li>);

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

class Details extends React.Component {

    clickFunction(name) {
        console.log(name)
    }

    onSortEnd({oldIndex, newIndex}) {
        this.setState({
          testlist: arrayMove(this.state.testlist, oldIndex, newIndex),
        });
    };

    render() {
        return (
            <div>
                <SortableList items={this.state.testlist} onSortEnd={this.onSortEnd.bind(this)} pressDelay="200" clickFunction={this.clickFunction} />
            </div>
        )
    }
}

Answer 2

This is an example of passing props to SortableContainer:

const SortableList = SortableContainer(({items, props, handleClickFunction, fieldSelector}) => {
    const subComponentList = [];
    items.map((value, index) =>
        subComponentList.push(
        <SortableItem 
            key={`item-${index}`} 
            index={index}
            value={value} 
            props={props} 
            handleClickFunction={handleClickFunction}
            fieldSelector={fieldSelector} 
        />)
    );

    return (
        <ul>{subComponentList}</ul>
    );
});