reactjs / reactjs/react.dev

Tutorial: make clear warnings are to be found in dev console

Open
#1,163 6 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

I'm completely new to react and when I tried following https://reactjs.org/tutorial/tutorial.html , everything went smoothly except at the part before "Picking a Key" where it says

For now, we should see a list of the moves that have occurred in the game and a warning that says:

Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of “Game”.

I didn't realize codepen example had secretly overridden console.log to display the error msg in the page itself, so I thought I should be seeing the warning on my test page as well. I spent a long time looking for it, reexamining my code and setup, etc etc, and finally ended up asking and getting an answer on stackoverflow.

It's silly how the simplest things can become impossible hurdle for beginners who are learning on their own. I think a clarification that 1. for people following along with their own dev environment, this is to be found in the browser's developer console, and 2. the codepen example had changed console.log behavior but that's not the default to be expected.

Thank you very much.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the React tutorial at the section immediately before “Picking a Key,” and compare the CodePen example with the instructions for a local development environment. Clarify that the warning appears in the browser’s developer console and that CodePen overrides console.log to display it in the page; done when beginners are unlikely to search their page for the warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation
Issue type
Documentation
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.