How to use key prop in components in React native

user_17538962 0
Viewed 901

I have two components i.e.CollapsableCard and InnerParentCard.

InnerParentCard is the child of CollapsableCard and CollapsableCard is the child of the main screen.

Under the main screen, I have a return component for CollapsableCard.

 <SalaryCardFlatList
          data={allCardTitle}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => {
<CollapsibleCard
         
         data={item.innerData}
         formTitle={item["@TEUR"]}
         tashlumBody={tashlumBody}
         isTabularFormat={item.isTabularFormat}
         isTitleText={item.isTitleText}
       />
}

below is the array rendering for CollapsableCard.

props.data.forEach((obj, objIndex) => {
      innerArray = allInnerContent.map((keyName, index) => {
        if (props.isTabularFormat) {
          if (index === hebrewMonthArray.length - 1) {
            return (
              <DataTable.Cell style={styles.dataTableCell}>
                <Text style={{ fontSize: 9 }}> {obj["@VALUE_SUM"]}</Text>
              </DataTable.Cell>
            );
          } else {
            if (obj.hasOwnProperty(`@VALUE${index + 1}`)) {
              return (
                <DataTable.Cell style={styles.dataTableCell}>
                  <Entypo name="check" size={20} color="#1F75FE" />
                </DataTable.Cell>
              );
            } else {
              return (
                <DataTable.Cell style={styles.dataTableCell}></DataTable.Cell>
              );
            }
          }
        }
        //NOTE:taken styleValue for aligning each index value of innerContain
        const styleVar = index === 0 ? styles.value : styles.innerValue;
        const styleValue =
          index === 0
            ? styles.firstIndexValue
            : index === 1
            ? styles.secondIndexvalue
            : index === 2
            ? styles.thirdIndexValue
            : styles.innerValue;
        if (!props.isTitleText) {
          return <Text style={styleVar}>{obj[keyName]}</Text>;
        } else return <Text style={styleValue}>{obj[keyName]}</Text>;
      });

Under CollapsableCard component, I have InnerParentCard.

 <InnerParentCard
              
                tashlumList={props.tashlumList[`${objIndex + 1}`]}
                allTashlumValue={obj}
                formBodyValue={props.formBody}
                updateValue={updateValue}
                isHelpMessage={helpMessage}
                isSubTitleText={subTitleText}
                isKav1Present={props.isKav1Present}
                isTotalAmount={totalAmount}
                allTashlumSection={props.allTashlumArray[`${objIndex}`]}
                allChildSection={props.allTashlumChildSection[`${objIndex}`]}
                isHefAmount={hefAmount}
                isAhuzAmount={ahuzAmount}
                isFromDate={fromDate}
                isToDate={toDate}
              ></InnerParentCard>

below is the rendering for InnerParentCard.

 allInnerContent.forEach((tashlum, index) => {
    const styleVar =
      index === 0
        ? styles.value
        : index === 1
        ? styles.innerValue
        : styles.titleValue;
    const styleValue =
      index === 0 ? styles.firstIndexvalue : styles.LastIndexValue;
    {
      !props.isKav1Present
        ? allTashlum.push(
            <TashlumView>
              <Text style={styleVar}>{props.allTashlumValue[tashlum]}</Text>
            </TashlumView>
          )
        : allTashlum.push(
            <TashlumView>
              <Text style={styleValue}>{props.allTashlumValue[tashlum]}</Text>
            </TashlumView>
          );
    }
  });

for these two components, it is showing warnings for both child components.

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `CollapsibleCard`.

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `InnerParentCard`.

How to pass key prop to CollapsableCard and InnerParentCard components?

react-native reactjs
1 Answers

For each array that either component is rendering they still need to include a unique React key prop for each mapped element being rendered.

CollapsableCard

props.data.forEach((obj, objIndex) => {
  innerArray = allInnerContent.map((keyName, index) => {
    if (props.isTabularFormat) {
      if (index === hebrewMonthArray.length - 1) {
        return (
          <DataTable.Cell
            key={/* some unique key value here */}
            style={styles.dataTableCell}
          >
            <Text style={{ fontSize: 9 }}> {obj["@VALUE_SUM"]}</Text>
          </DataTable.Cell>
        );
      } else {
        if (obj.hasOwnProperty(`@VALUE${index + 1}`)) {
          return (
            <DataTable.Cell
              key={/* some unique key value here */}
              style={styles.dataTableCell}
            >
              <Entypo name="check" size={20} color="#1F75FE" />
            </DataTable.Cell>
          );
        } else {
          return (
            <DataTable.Cell
              key={/* some unique key value here */}
              style={styles.dataTableCell}
            />
          );
        }
      }
    }
    //NOTE:taken styleValue for aligning each index value of innerContain
    const styleVar = index === 0 ? styles.value : styles.innerValue;
    const styleValue =
      index === 0
        ? styles.firstIndexValue
        : index === 1
        ? styles.secondIndexvalue
        : index === 2
        ? styles.thirdIndexValue
        : styles.innerValue;

    return (
      <Text
        key={/* some unique key value here */}
        style={!props.isTitleText ? styleVar : styleValue}
      >
        {obj[keyName]}
      </Text>
    );
  });

InnerParentCard

allInnerContent.forEach((tashlum, index) => {
  ...

  allTashlum.push(
    <TashlumView key={/* some unique key value here */}>
      <Text style={!props.isKav1Present ? styleVar : styleValue}>
        {props.allTashlumValue[tashlum]}
      </Text>
    </TashlumView>
  );
  ...
});

The key={/* some unique key value here */} can, and should, be any unique key value that is intrinsic to the mapped element, i.e. an id or any unique property, or combination of properties, so long as it is unique among the immediate siblings. Avoid random keys and the index.

user_86908570
Related