re: React Beginner Question Thread ⚛ VIEW POST

FULL DISCUSSION
 

Hi!

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={post.link}>
      <h2>{post.title.rendered}</h2>
    </Link>
  </article>
)

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

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

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

    this.setState({
      posts,
      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>
        ) : (
          // posts.map(SinglePost) // because it's easier on the eyes
          posts.map(post => <SinglePost post={post} key={post.ID} />)
        )}
      </div>
    )
  }
}

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: codepen.io/k1sul1/pen/WdpKwx

code of conduct - report abuse