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

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!

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!

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!

Hi @Ateesh_Verma :wave:

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