CODEWITHSUNDEEP
react-native
Danish Hussain
Danish Hussain

Reputation: 1

warning each child in an array or iterator should have a unique key prop. react native

I have build React Native App and I face Problem for "Api" t did not give me an error but i gives me a warring or Each items should have unique key I didn't find any solution for how i solve this.

how to I use unique key in function

** How to fix reactjs warning: each child in an array should have a unique prop…? 2**

<View style={styles.contanier}>
    {this.props.data.map(function(videoData, index) {
      console.log(videoData, "fetch3");
      return (
        <View style={styles.card_contanier}>
          <TouchableOpacity
            style={{ flex: 1 }}
            // onPress={() => this.onforward()}
          >
            <View style={{ height: "45%" }}>
              <Image
                source={require("../img/special-page-banner.jpg")}
                style={{
                  flex: 1,
                  width: imageWidth,
                  resizeMode: "stretch"
                }}
              />
            </View>
            <View style={styles.title}>
              <Text
                style={{ color: "black" }}
                numberOfLines={2}
                ellipsizeMode={"tail"}
              >
                {videoData.name}
              </Text>
            </View>
            <View style={{ height: "20%" }}>
              <View style={styles.buttom_contanier}>
                <View style={styles.logo}>
                  <Thumbnail
                    source={require("../img/andy-sm.png")}
                    style={{ height: 32, width: 32 }}
                  />
                </View>
                <View style={{ flexDirection: "column" }}>
                  <View style={{ flexDirection: "row", left: 5 }}>
                    <Text
                      style={{ color: "black" }}
                      numberOfLines={1}
                      ellipsizeMode={"tail"}
                    >
                      {videoData.created_by_user.name}
                    </Text>
                  </View>
                  <View style={styles.iconic_contanier}>
                    <Icon name="calendar" size={10} style={{ top: 2 }} />
                    <Text style={styles.text}>10 Oct 2018</Text>
                  </View>
                  <View style={styles.iconic_contanier}>
                    <Icon name="eye" size={10} style={{ top: 2 }} />
                    <Text style={styles.text}>11 views</Text>
                  </View>
                </View>
              </View>
            </View>
          </TouchableOpacity>
        </View>
      );
    })}
  </View>

Upvotes: 0

Views: 1019

Answers (1)

EQuimper
EQuimper

Reputation: 5929

First and not the recommended approach will be tu use your index you get as second argument in your .map callback

<View style={styles.contanier}>
    {this.props.data.map(function(videoData, index) {
      console.log(videoData, "fetch3");
      return (
        <View key={index} style={styles.card_contanier}>

But using index is not recommended. If you have an id coming from your backend I will use it. This can cause problem with animation and thing like that if you use index.

<View style={styles.contanier}>
    {this.props.data.map(function(videoData, index) {
      console.log(videoData, "fetch3");
      return (
        <View key={videodata.id} style={styles.card_contanier}>

You can read about all this here https://reactjs.org/docs/lists-and-keys.html#keys

And article here about why not use index https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Upvotes: 1

Related Questions