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 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 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 component.

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?

CodePudding user response：

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.