Pass event handler method from parent component to list items as prop

Gesture enabled responsive lists
1

Hello,
I have a list view with checkboxes in list items (very similar to the example here: https://demo.mobiscroll.com/react/listview/checklist#).

I need to pass a handler method from the parent component to the list item so that it can be invoked when the checkbox is checked/unchecked. I tried to pass the method as a prop to the listview component but it doesn’t seem to relay it to the list items.

Is there an easy way to do this ?

Thanks!

2

Hi @Ateesh_Verma :wave:

In this case, you can use the itemProps option which is passed to each list item. For example:

const myProps = {
  myCustomHandler: () => { console.log('xyz') }
};
<mobiscroll.Listview
 itemType={ListItem}
 itemProps={myProps}
/>

Let me know if this helps!

3

Thanks Elod! This does seem to be what I’m looking for.

Although when I try to use this, I’m still getting an error: “TypeError: this.props.checkHandler is not a function”

checkHandler = () => {
    alert('checked');
}
render = () => {
    return (
        <div>
            <mobiscroll.Form theme="ios" themeVariant="light" id="ingredientForm">
                <mobiscroll.Listview
                    theme="ios"
                    themeVariant="light"
                    itemType={ListItem}
                    data={this.state.ingredientsList}
                    actionable={true}
                    select="multiple"
                    onItemTap={this.onIngredientTap}
                    itemProps={this.checkHandler}
                />
            </mobiscroll.Form>
</div>
)
}

class ListItem extends React.Component {
render() {
    return <li>
        <input id={this.props.item.id} type="checkbox" defaultChecked={this.props.item.check} onChange={(event) => this.props.checkHandler()} />
        <div className="ingredient-name">{this.props.item.text}</div>
    </li>;
}

}

I tried looking up the documentation for itemProps, but unable to find it here: https://docs.mobiscroll.com/react/listview#usage

Appreciate your help!

4

Hi @Ateesh_Verma :wave:

The problem is that you passed the data to itemProps incorrectly. An object must be passed, not a function.

5

Hi Elod,
I did try an object as well but got the same error… Since I’m using js (not tsx), I’m unable to use ‘const’ inside a component.

Here’s what I tried:

class ListItem extends React.Component {
render() {
    return <li>
        <input id={this.props.item.id} type="checkbox" defaultChecked={this.props.item.check} onChange={(event) => this.props.myProps.myCustomHandler()} />
    </li>;
    }
}


export default class ShoppingIngredients extends Component {

    ...

    myProps = {
    myCustomHandler: () => { console.log('xyz') }
};

...
render = () => {
    return (
        <div>
            <mobiscroll.Form theme="ios" themeVariant="light" id="ingredientForm">
                <mobiscroll.Listview
                    theme="ios"
                    themeVariant="light"
                    itemType={ListItem}
                    data={this.state.ingredientsList}
                    actionable={true}
                    select="multiple"
                    onItemTap={this.onIngredientTap}
                    itemProps={this.myProps}
                />
            </mobiscroll.Form>
 ...

The error I keep getting is:

Uncaught TypeError: Cannot read property 'myCustomHandler' of undefined
at onChange (ShoppingIngredients.page.js:18)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at Array.forEach (<anonymous>)
at forEachAccumulated (react-dom.development.js:3257)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at discreteUpdates$1 (react-dom.development.js:21887)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)

Maybe it’s an issue with how I’m referencing myProps on the ListItem side i.e. ’ this.props.myProps.myCustomHandler()’.

Would it be possible to point to a javascript example for the same or some documentation on itemProps param ?

Thanks!

6

Hello @Ateesh_Verma :wave:

This error is caused by the problem that in the ListItem class you referred to the myCustomHandler function, as follows: this.props.myProps.myCustomHandler. In this case, you don’t need to use the myProps key, because you passed it from the parent class.

You need to use it like this: this.props.myCustomHandler()