Beginner React Mistakes
Tags: beginners, react, codenewbie, javascript
Published: 2022-06-23 18:13:43

Are you starting out in React? Just as you were getting the hang of JavaScript, here comes React and JSX with little "ghosts" that sneak up on you. As a level one player, let's explore a few basic gotchas as we begin to navigate the maze of React.
<br> ![Header picture with floating Pac-man ghosts and react logos, reads "React Gotchas"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpcj4ozxgwq0oql6t2z4.png) There are gotchas in every programming language and let's face it, even the well-seasoned players still get caught by the ghosts occasionally. You'll never get that hour of your life back that you spent searching for that error that turned out to be a minor gotcha. Don't be hard on yourself.. we have all been there.. and odds are, it will happen again.
<br> ![Divider Banner with Pac-man ghosts looking at "Avoid Using Index Key Props"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p65075k7wsrsf5fk5qpf.png)**Keys must be unique** or you will receive an error! 
"Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity" [React](https://reactjs.org/docs/lists-and-keys.html#basic-list-component) <br>
Below when using `.map()` I used `key={ghost.index}` which triggers a warning message:
```
function GhostList({ ghosts }) {

  const displayGhosts = ghosts.map((ghost) => 
    <Ghost key={ghost.index} ghost={ghost} />)

  return (
      <div>
        <h1>Gotcha Ghosts</h1>
        <ul>
          {displayGhosts}
        </ul>
      </div>
  )
}
```
![!Warning: Each child in a list should have a unique "key" prop., picture of console warning message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eagwm7t3tyutci5mrade.png) You should not be using an array index for keys and should only be used as a last resort. Doing so can cause errors/bugs in your code and cause issues with component state. [Level Up - Tell Me Why](https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318) Instead opt for the element.id or another unique string that will identify the list item. Here I used the ghost.id for my key but alternatively I could use `key={ghost.name}` if there is no id available and each name is unique. 
```
const displayGhosts = ghosts.map((ghost) => 
    <Ghost key={ghost.id} ghost={ghost}/>)
   
```
Recently I received this warning when working with keys:
![Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpmu137gu0n0as8fezf2.png) I thought what am I doing wrong? I was dealing with an  array of objects (like my ghosts), and the key's value was an array...
```
const ghosts = [
        {
            "id": 1,
            "name": "Inky",
            "color": "blue",
            "altNames":["Fickle", "Bashful"]
        },
        {
            "id": 2,
            "name": "Blinky",
            "color": "red",
            "altNames":["Chaser", "Shadow"]
        },
        {
            "id": 3,
            "name": "Pinky",
            "color": "pink",
            "altNames":["Ambusher", "Speedy"]
        },
        {
            "id": 4,
            "name": "Clyde",
            "color": "orange",
            "altNames":["Stupid", "Pokey"]
        }
    ] 
```
When you .map() through the "altNames" array to display them on the DOM, you can not use key={ghost.id} or key={ghost.name}. These will not provide a unique key for each element of the "altNames" array (list) and you will receive an error like the one above. The following was my solution, by assigning altName as the key to each element. This only works because in this data each altName (elements in array) is unique:
```
function Ghost({ ghost }) {
  const displayAltNames = ghost.altNames.map((altName) => 
    <li key={altName}>{altName}</li>
  )

  return (
      <div>
        <h3>Ghost: {ghost.name}</h3>
        <p>Color: {ghost.color}</p>
        <p>Other Names:</p>
        <ul>{displayAltNames}</ul>
      </div>
  )
}
```
<br>![Divider Banner with Pac-man ghosts looking at "Use React.Fragment"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqwrimf3mbtk9udp6smk.png) In JSX you can only return **one parent element**. Notice in the code below there are two parent `<div>`s with children trying to be returned. In the console, you will receive a syntax error. 

```
function Ghost({ ghost }) {
  const displayAltNames = ghost.altNames.map((altName) => (
    <li key={altName}>{altName}</li>
    ));

  return (
      <div>
        <h2>Say hello to {ghost.name}!</h2>
      </div>
      <div>
        <h3>Ghost: {ghost.name}</h3>
        <p>Color: {ghost.color}</p>
        <p>Other Names:</p>
        <ul>{displayAltNames}</ul>
      </div>
  );
}
```
![SyntaxError: /src/GhostList.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnzqxazcfppddfst6yox.png) As you can see, the error even suggests what to do. After getting this error once, you’ll know exactly what mistake to look for in your code. I wish all errors were this obvious! Now, how do you fix this?  You could wrap it all in another `<div>` OR use `<React.Fragment>`. If you need those two `<div>`s you can now return them by wrapping your return with `<React.Fragment>`: 

```
return (
    <React.Fragment>
      <div>
        <h2>Say hello to {ghost.name}!</h2>
      </div>
      <div>
        <h3>Ghost: {ghost.name}</h3>
        <p>Color: {ghost.color}</p>
        <p>Other Names:</p>
        <ul>{displayAltNames}</ul>
      </div>
    </React.Fragment>
  );
}
```
Or if I just had one `<div`, I could replace it with `<React.Fragment>` or the shortened syntax `<> </>`

```
return (
    <>
      <h3>Ghost: {ghost.name}</h3>
      <p>Color: {ghost.color}</p>
      <p>Other Names:</p>
      <ul>{displayAltNames}</ul>
    </>
  );
}
```
You can also use `<React.Fragment>` to replace a wrapping element to avoid cluttering the DOM with unneeded nodes. When selecting your wrapping element, keep in mind a key is the only attribute that can be passed to `<React.Fragment>`. [Why must JSX expressions have only ONE parent element?](https://dillionmegida.com/p/why-jsx-expressions-must-have-one-parent/)
<br>![Divider photo with Pac-man ghosts looking at "Capitalize Component Names"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9jx58betae5lfpoanc5.png) Another potential JSX snag is components must begin with an uppercase, which is quite conflicting from what we have learned in JavaScript. This new naming convention is one of the first gotchas you encounter in React.  Below are two different errors triggered by forgetting to capitalize component names. 

`<ghost />` should be `<Ghost />`
console error...

![Warning: The tag <ghost> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptmox0kensazas43qybx.png)

`function ghostList({ ghosts }) {`... 
`export default ghostList; ` 
console error....

![ReferenceError: GhostList is not defined](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/119nnvyymkkzgi3501mb.png)

Also check your import component names because that error will tell you something is really wrong! It is good practice to intentionally experiment with errors throughout your code when learning so you can be familiar with different error messages. 

"When an element type starts with a lowercase letter, it refers to a built-in component like `<div>` or `<span>` and results in a string 'div' or 'span' passed to React.createElement." [React](https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
<br> ![Footer with Pac-Man ghosts and power pellets with React logo in the center](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afnd49lfphriz5r5z3kk.png)
 
When gathering data for the pac-man ghosts, I noticed all of them have playful names.. but then there is Clyde.  When I saw the original Japanese names... poor Clyde's original name is "Stupid". There has to be some long lost story on how Clyde got his name... if you know.. share! Now it's time to chomp on another React power pellet and level up to gotchas dealing with state and hooks.

**You can connect with me on** [LinkedIn](https://www.linkedin.com/in/rachelsmithstark/) **&** [GitHub](https://github.com/rstarksmith)

Resources: [Namco] (https://pacman.com/en/history/), [React](https://reactjs.org/), [Canva](https://www.canva.com/)          

![footer picture with "Game Over" logo on it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05n70xtn5vzmeleikm9z.png)