How to get the React component ID

Gesture enabled responsive lists
1

Hello, I implemented a ListView and I’m having trouble understanding how to get the ID of the item (not the index), on the “onItemTap” event I can access the index, also I can go to the DOM and get the details of the component but this is not desired. Is there another way to get this ID, this is to redirect the user to a different page.

2 
    class AvatarItem extends React.Component {
    render() {
        return (
            //'line-heart',
            <li
                data-icon='line-heart'
                data-icon-align='right'
                key={this.props.item.idStore}
                ref={this.props.item.idStore}
            >
                <img alt={this.props.item.name} src={this.props.item.logo} />
                <h3>{this.props.item.name}</h3>
                <p>{this.props.item.address}</p>
            </li>
        );
    }
}

class ListStore extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: 'initial',
       };
    }

handleRedirect(event, inst) {
        console.log('Inst', inst.getVal()); 
//throws an error FilterStores.js:108 Uncaught TypeError: inst.getVal is not a function
    }

render() {
 return (
                <div>
                    <mobiscroll.Form theme='material'>
                        <mobiscroll.FormGroup>
                            <mobiscroll.FormGroupTitle>
                              Test List
                            </mobiscroll.FormGroupTitle>
                            <mobiscroll.Listview
                                theme='material'
                                itemType={AvatarItem}
                                data={this.props.storeList}
                                enhance={true}
                                // swipe={true}
                                onItemTap={this.handleRedirect}
                               //onItemTap={(event, inst) => this.handleRedirect(event, inst)}
                            />
                        </mobiscroll.FormGroup>
                    </mobiscroll.Form>
                </div>
            );
        }
    }
}


///Props

storeList: [    {
        id: '001',
        idStore: '002',
        name: 'Test #1',
        logo: '/user-imgs/test001.jpg',
        address: '2.5 km',
    },
    {
        id: '002',
        idStore: '005',
        name: 'Test #2',
        logo: '/user-imgs/test002.jpg',
        address: '3.5 km',
    },];
3

Hi @Angelica,

Thanks for the code and details. I assume you need the idStore property of the items. There are multiple ways to achieve that. One way would be to use the DOM element. The onItemTap handler gives access to the DOM element you are making the tap on. You can pass the id as a data attribute and get it in the onItemTap:

<li
  data-icon='line-heart'
  data-icon-align='right'
  key={this.props.item.idStore}
  ref={this.props.item.idStore}
  data-id={this.props.item.idStore}
>

and the onItemTap handler:

handleRedirect:(event, inst) {
  var idStore = event.target.getAttribute('data-id');
}

Another way would be to pass the handleRedirect function to the listview item itself and not to use the onItemTap. You can put a click handler to the list items directly and there you have access to the whole storeList item. You can pass additional props to the listview items via the itemProps property:

<mobiscroll.Listview 
  itemProps={{ redirect: this.handleRedirect }}
  theme="material"
  ...

and then the items:

class AvatarItem extends React.Component {
    handleClick() {
        // call the redirect with whatever arguments you need
        this.props.redirect(this.props.item.idStore);
    }
    render() {
        return (<li onClick={this.handleClick}
...

I would use the first solution, because I find it more simple, but this is just a personal opinion.
Let me know if any of that works for you!

Best,
Zoli

4

Both answers are very useful, helps me understand Mobiscroll better, Thank you .