Adding multicolour text to check box gives warning

[PreetikaSingh]

I have a requirement to add multicolour text to checkbox. I have achieved the same, but it always shows a warning 'Warning: Each child in a list should have a unique "key" prop.' , which looks annoying. Can there be a feature to add multicolour text as per index? Here is my code for the same

let contentString='By logging into this application you agree to our Terms and Conditions.'
    let index=[9, 10 , 11]
 return (
    <View style={styles.container}>
<BouncyCheckbox
        fillColor="red"
        unfillColor="#FFFFFF"
        iconStyle={{ borderColor: "red" , borderRadius: 2 }}
        style={{ marginTop: 8, marginLeft: 50 }}
        isChecked={isSelectedTerms}
        textStyle={{
          textDecorationLine: "none",
          marginRight: 50,
          fontSize: 14
        }}
        size = {18}
        text={<Text style={{color: 'black'}}>
          {contentString.split(" ").map((x, ind) => <Text style={{color: index.includes(ind)?'red':'black'}} >{x+" "}</Text> )}
          </Text>
        }
        disableBuiltInState
        onPress={() => setSelectionTerms(!isSelectedTerms)}
      />
</View>)

[chzappsinc]

let contentString='By logging into this application you agree to our Terms and Conditions.' let index=[9, 10 , 11] return ( <View style={styles.container}> <BouncyCheckbox fillColor="red" unfillColor="#FFFFFF" iconStyle={{ borderColor: "red" , borderRadius: 2 }} style={{ marginTop: 8, marginLeft: 50 }} isChecked={isSelectedTerms} textStyle={{ textDecorationLine: "none", marginRight: 50, fontSize: 14 }} size = {18} text={<Text style={{color: 'black'}}> {contentString.split(" ").map((x, ind) => <Text style={{color: index.includes(ind)?'red':'black'}} >{x+" "}</Text> )} </Text> } disableBuiltInState onPress={() => setSelectionTerms(!isSelectedTerms)} /> </View>)

You should have unique key in each list

let contentString =
  'By logging into this application you agree to our Terms and Conditions.';
let index = [9, 10, 11];
return (
  <View style={styles.container}>
    <BouncyCheckbox
      fillColor="red"
      unfillColor="#FFFFFF"
      iconStyle={{borderColor: 'red', borderRadius: 2}}
      style={{marginTop: 8, marginLeft: 50}}
      isChecked={isSelectedTerms}
      textStyle={{
        textDecorationLine: 'none',
        marginRight: 50,
        fontSize: 14,
      }}
      size={18}
      text={
        <Text style={{color: 'black'}}>
          {contentString.split(' ').map((x, ind) => (
            <React.Fragment key={Math.floor(Math.random() * 11)}>
              <Text style={{color: index.includes(ind) ? 'red' : 'black'}}>
                {x + ' '}
              </Text>
            </React.Fragment>
          ))}
        </Text>
      }
      disableBuiltInState
      onPress={() => setSelectionTerms(!isSelectedTerms)}
    />
  </View>
);