React Grimoire
  • โ‰๏ธIntroduction
  • ๐Ÿง‘โ€๐ŸŽ“๐Ÿง‘๐ŸŽ“ React Fundamentals
    • The Basic javascript "Hello world"
    • Basic view on React core API's
    • JSX
    • React Props and styling
    • Components
    • Handling Events With React
    • Form
    • Array and Lists
    • Class Component State
    • Class Component Life Cycle
    • PropTypes
  • ๐ŸชReact Hooks
    • Intro to hooks
    • useState
    • useEffect
    • useRef
    • useContext
    • useMemo
    • useCallback
    • useReducer
    • useLayoutEffect
    • useImperativeHandle
    • Hook flow
    • Custom hooks
      • useDebugValue
    • React 18 hooks
  • ๐Ÿ““React Guidelines
    • React Components Composition Guidelines
    • React hooks guidelines
    • The use of Memoization
    • Lifting State Up
  • ๐Ÿ”ญConcepts
    • Advanced Patterns
      • Compound Components Pattern
      • Control Props Pattern
      • Props Getters Pattern
      • Custom hook pattern
      • Context Module
      • State Reducer
    • React Under the hood
      • ๐ŸWhat is "Rendering"?
      • ๐ŸReact Lifecycle
      • ๐ŸReconciliation & Virtual DOM in React
      • ๐ŸFiber
    • โฐConcepts to always have in mind
  • ๐ŸงฉReact ecosystem
    • Forms Tools
      • React Hook Form VS Formik
    • TypeScript
      • ๐ŸConditional React props with TypeScript
    • ๐ŸBuild tool choice for MVP projects
    • A CSS methodology comparison
      • ๐ŸPost CSS processor :Sass
      • ๐ŸCSS in js :Styled-components
      • ๐ŸUtility Classes: Tailwind
  • โ‰๏ธTesting
    • In Progress
  • ๐ŸŽญPerformance
    • in Progress
  • ๐Ÿš€Deployment
    • In Progress
  • ๐Ÿ–ผ๏ธDesign system
    • ๐ŸWhat's a design system anyway ?โ€‹?
  • ๐Ÿ”—Us-full links
    • Typescript and React basic tutorial
    • React-philosophies
    • React new doc
Powered by GitBook
On this page
  • Creating a list
  • Arrays and key props

Was this helpful?

Edit on GitHub
  1. ๐Ÿง‘๐ŸŽ“ React Fundamentals

Array and Lists

Creating a list

If thereโ€™s one unchanging thing about web applications, itโ€™s that they have lists. And so as you might expect, most frameworks attempt to make your life easier with a special syntax for lists.

But with React, elements are just objects, React.createElement() is just a function, and lists are just old plain arrays

Rendering a list with React involves three steps:

  1. Create an array of element objects

  2. Set that array as the children of a container element

  3. Render the container element

Let take a look at this react component

import * as React from "react";

const animals = ["๐Ÿฆ‡" ,"๐Ÿ•" ,"๐Ÿˆ" , "๐Ÿ„"]
 

function App() {
  return (
    <div>
      <ul>
        {animals.map((item) => (
          <li>
            <div>{item}</div>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

As you can see we are creating an array of animals ,Simple right but if we try to open our dev tools and check our console we will find a common react list error

Warning: Each child in a list should have a unique "key" prop.

Arrays and key props

When React encounters an array of elements with identical type and props, despite looking identical from the outside, it cannot know that they are really identical. It could be that they each have different internal states.

This becomes a problem when the order of the elements changes. Because all the elements look identical, React canโ€™t reorder the corresponding DOM nodes.

To demonstrate, this example renders an array of checkbox elements. Try clicking a checkbox and then clicking the โ€œReverseโ€ button. Notice how nothing happens.

And when i tried to log what checkboxes is rendering i have this particular tree

We can observe that indeed we have 3 Element of type input that they all have a prop type="checkbox",but there is not really something that can distinguish them.

But while React canโ€™t distinguish between identical elements in an array, you can always give it some help! And that is what the key prop is for. By providing a key, youโ€™re giving React a way to keep track of otherwise identical elements.

To see this in action, if i try adding unique key props to each of the checkboxes above. (keys can be strings or numbersโ€Šโ€”โ€Šthe only thing that matters is that theyโ€™re unique). Once youโ€™ve added these, when click a checkbox and then click "Reverse"; the checked boxes should now move as expected!

In our example, we've encapsulated the content JSX and ReactDOM.render method call within a reverseAndRender function. After that, we call the function, which will render the content on the UI when the page loads. It's also worth noting that the reverseAndRender function call has been inserted within the onClick function. So, whenever we click the button, the reverseAndRender function is called, and the updated reversed checkboxes are displayed on the UI.

But still, it's not feasible to call the reverseAndRender function every time we want to update the UI. So React added the concept of State.

PreviousFormNextClass Component State

Last updated 3 years ago

Was this helpful?

๐Ÿง‘โ€๐ŸŽ“
Lists and Keys โ€“ React
Why React needs a key propWhy React needs a key prop
Logo
Logo