How to update a single item in FlatList in React Native?

You can set extraData in FlatList:

<FlatList
...
    extraData={this.state}
    data={this.state.posts}
    renderItem={this.renderPost}
    ...
/> 

When state.posts or state.posts‘s item change, FlatList will re-render.

From FlatList#extradata:

A marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.

Update:

Functional component implementation:

export default function() {
    // list of your data
    const [list, setList] = React.useState([])
    const [extraData, setExtraData] = React.useState(new Date())

    // some update on the item of list[idx]
    const someAction = (idx)=>{
        list[idx].show = 1
        setList(list)
        setExtraData(new Date())
    }
    return (
        <FlatList
            // ...
            data={list}
            extraData={extraData}
        />
    )
}

After updating list, I use setExtraData(new Date()) to tell the FlatList to re-render. Because the new time is different from the previous.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)