Each child in an array or iterator should have a unique "key" prop

[murugaratham]

I didn't had that problem during dev time or release. But i'm exploring using snapshots for some tests and i'm given

node_modules\fbjs\lib\warning.js:33
      Warning: Each child in an array or iterator should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.

loading.tsx

import * as React from 'react';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
import CircularProgress from '@material-ui/core/CircularProgress/CircularProgress';
import Typography from '@material-ui/core/Typography/Typography';

const styles = (theme: Theme) => ({
  progressContainer: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  progress: {
    margin: theme.spacing.unit * 2,
  },
});

interface ILoadingProps {
  message: string;
}

type PropsWithStyles = ILoadingProps &
  WithStyles<'progressContainer' | 'progress'>;

const Loading = (props: PropsWithStyles) => {
  const { classes, message } = props;
  return (
    <div className={classes.progressContainer} style={{ flexDirection: 'column' }}>
      <CircularProgress className={classes.progress} size={50} />
      <Typography>{message || 'Loading'}</Typography>
    </div>
  );
};

export default withStyles(styles)<ILoadingProps>(Loading);

loading.test.js

import * as React from 'react';
import { shallow } from 'enzyme';
import Loading from 'components/common/Loading';
import { expect } from 'chai';
import renderer from 'react-test-renderer';

const defaultMessage = "Loading";
const LoadingComponent = () => shallow(<Loading  />);

describe('Component - Loading', () => {
  const component = LoadingComponent();
  /**
   * should match default loading component with default message
   */
  it('should match snapshot', () => {
    const tree = renderer.create(component).toJSON();
    expect(tree).to.matchSnapshot();
  });

  it('should render with default message (' + defaultMessage + ') when no messages are provided', () => {
    expect(component.html()).to.contain(defaultMessage);
  });

  it('should render with custom message when message is provided', () => {
    component.setProps({
      message: 'testing loading',
    });
    expect(component.html()).to.contain(component.props().message);
  });
});

If i remove the snapshot test case, i don't get such error, and if it helps, here's a copy of my .snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Component - Loading should match snapshot 1`] = `
<div
  className="Loading-progressContainer-1"
  style={
    Object {
      "flexDirection": "column",
    }
  }
>
  <div
    className="MuiCircularProgress-root-3 MuiCircularProgress-colorPrimary-6 MuiCircularProgress-indeterminate-5 Loading-progress-2"
    role="progressbar"
    style={
      Object {
        "height": 50,
        "width": 50,
      }
    }
  >
    <svg
      className="MuiCircularProgress-svg-8"
      viewBox="22 22 44 44"
    >
      <circle
        className="MuiCircularProgress-circle-9 MuiCircularProgress-circleIndeterminate-11"
        cx={44}
        cy={44}
        fill="none"
        r={20.2}
        strokeWidth={3.6}
        style={Object {}}
      />
    </svg>
  </div>
  <p
    className="MuiTypography-root-12 MuiTypography-body1-21"
  >
    Loading
  </p>
</div>
`;

[andrestaht]

@murugaratham Hey! Have you checked the browser console? Let me know whether that warning message is shown there as well or not.

[murugaratham]

Sorry for late reply, I don't see this in console