Unique listKey prop issue

Question

I am trying to make a nested FlatList in my apps.

I use accordion components by native base as the parent of my FlatList, and in the content of each section, I'm trying to put a FlatList. However, I ended up with the error about "you must pass a unique listKey props to each sibling list"

componentWillMount() {
    var toPush = []
    const request = axios({
        method: "POST",
        url: "XXX",
        data: {
            customer_id: this.props.User.userData.id
        },
        headers: {
            "Content-Type": "application/json"
        }
    }).then(response => {
        response.data.map(history => {

            this.getDish(history.order_id).then((dish)=>{
                this.setState({
                    dataArray: [...this.state.dataArray,
                        {
                            title: "Restaurant:" + history.restaurant_name + " , " + "Order id : " + history.order_id,
                            content: <Item data={dish} listKey={history.order_id}/>
                        }
                    ]
                })               
            })

        })
        this.setState({
            dataArray: toPush
        })

How do I solve this issue?

score 0 · Answer 1 · answered Jun 11 '18 at 12:49

0

You need to add a key attribute to the component. Keys are used so react can identify what items have been changed.

content: <Item data={dish} key={history.order_id} listKey={history.order_id} />

If your listKey prop isn't needed you can remove it

answered Jun 11 '18 at 12:49

Jason McFarlane

2,048
3
18
30

sorry i dont get it . so which component should i add a key attribute ? – Hafizi Jun 11 '18 at 20:26
It looks to me like you are creating an array of Item components?? If this is true that is why you are getting the error. When you have a list of the same components you need to apply a `key` prop to each of them – Jason McFarlane Jun 11 '18 at 20:29
yes . Im creating an array of item components and Item component will render a flatlist – Hafizi Jun 11 '18 at 20:35
so inside of each item component it needs a key prop `key={someuniquevalue}`. This one is not for you to reference in the component its purely a react thing – Jason McFarlane Jun 11 '18 at 20:45

Unique listKey prop issue

1 Answers1