RNE - React Native 0.78 ListItem.Accordion Each child in a list should have a unique "key" prop.

[deepktp]

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

RNE - #3968

@FTW-001

Expected behavior

..

Describe the bug

..

Steps To Reproduce

..

Screenshots

..

Your Environment

`npx @rn-vui/envinfo`

  ```
    Output from `npx @rn-vui/envinfo` goes here.
  ```

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username). Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[softov]

For me was the entire use of a ListItem with multiple items inside, I assume the problem is the same.

Reading the code, ListItem uses PadView, to create a 'gap' between itens.

#https://github.com/deepktp/react-native-vikalp-elements/blob/next/packages/base/src/ListItem/ListItem.tsx

#https://github.com/deepktp/react-native-vikalp-elements/blob/next/packages/base/src/ListItem/components/PadView.tsx

PadView, maps the children, creating new items without proper key.
You could create a clone and add custom keys to the items.

{React.Children.map(
        children,
        (child, index) =>
          child && [
            child,
            index !== length - 1 && (
              <View style={{ paddingLeft: pad }} />
            ),
          ]
      )}

I don't use npm, I use a customized version of rneui.

I changed my code to not use a PadView, instead I just use a View with style { gap: pad }

[deepktp]

@softov can you share some more details or some code lines so i can work on that

Commit was to fix the issue of key prop warning.

[softov]

@deepktp my fix was the same as the commit.

export const PadView: React.FC<PadViewProps> = ({
  children,
  pad,
  Component,
  ...props
}) => {
  const _root = useRef(null);

  const length = React.Children.count(children);
  const Container = Component || View;

  return (
    <Container {...props} ref={_root} testID="RNE__LISTITEM__padView">
      {React.Children.map(children, (child, index) =>
          child && [
            child,
            index !== length - 1 && (
              <View style={{ paddingLeft: pad }} key={`PadView-${index}`} />
            ),
          ]
      )}
    </Container>
  );
};