re: React Beginner Question Thread ⚛ VIEW POST



The thing that often gives me trouble is 'Warning: Each child in an array or iterator should have a unique "key" prop.'

This is one example of where it happens but I can't understand why:

// export const SinglePost = (post) => ( // this is what I tried to do first
export const SinglePost = ({ post }) => (
  <article className="post-list__single">
    <Link to={}>

export default class PostList extends Component {
  constructor(props) {

    this.state = {
      posts: [],
      loading: true,

  async componentDidMount() {
    const posts = await WP.getPosts() // "WP" handles errors for me, so there's nothing to swallow.

      loading: false,

  render() {
    const { posts, loading } = this.state
    return (
      <div className="post-list">
        {posts.length === 0 && loading ? (
          <p>Please wait while we load the posts...</p>
        ) : posts.length === 0 ? (
          <p>It appears that there is no posts.</p>
        ) : (
          // // because it's easier on the eyes
 => <SinglePost post={post} key={post.ID} />)

post.ID definitely exists.

I know why the first way doesn't work, I just didn't remember it on the first try, but why doesn't the second work?


Please create a minimal example that reproduces the problem. I can’t guess it from the code alone.


Turns out, I'm an idiot. I had changed the casing of "ID" in the response, but forgot to commit it aaaaaand I ended up with it happening.

Basically I was doing key={undefined}. Could React warn user when this happens, something like "Looks like you tried to supply a key, but the value supplied is undefined. Check the render..." and so on?

This demo works:

code of conduct - report abuse