Stuck on warning "unique key"

Question

I am currently adapting a Mobx tutorial for an application to work. link What I want to do is add a simple counter button for each displayed list item. I thought it would be pretty simple, but I have to make a syntax error, because I cannot get things to mesh correctly. The main error that I am getting now is that “each child in an array or iterator must have a unique“ key ”property. I decided that I would resolve this by adding uuid to each counter (the counter is what causes the appearance errors). Alas, I can not find a solution.

Here is the github repository for the application: https://github.com/Darthmaul/UmCount

In particular, this file is the one that received most of the changes. I also added the file “counterstore.js” to keep the counter intact (which seems unsuccessful).

Any help would be greatly appreciated. At the moment, I just don’t know what is wrong and what is right.

Thank,

Andrew

Answer 1

When you have a component that has an array of children, each of which can have its own children, not only children of a higher level, but also each child at a deeper level, needs its own key.

Performance issue

const Items = ({items}) => (
  <View style={{flex: 1, paddingTop: 10}}>
   {items.map((item, i) => {
        return (<View>
          <Text style={styles.item} key={i}>• {item} - {store.counter}</Text>
          <Button onPress={() => store.increment()} title="+1" color="#50EB5D" key={uuid()} />
          </View>
        )})
    }
  </View>
)

, Text Button , View .

React , . , . View, Text Button , , , , , , , .

.