React Debugging

Reactjs

  • JSX expressions must have one parent element.

    • Wrap all elements in render function under one <div></div> or <Fragment></Fragment>

  • Warning: Each child in a list should have a unique “key” prop.

    • Many times, this is by rendering based on array value: 
      {["A", "B", "C"].map((letter) => <li>{letter}</li>)}
    • Solution, add a key value to the highest wrapping element. Example: 
      {["A", "B", "C"].map((letter, index) => <li key={index}>{letter}</li>)}