Crash note - list, key, fake data generator

An example of a simple render() function that creates a list of elements using the map() function, and assigns a unique key to each item in the list:

import React from 'react';

class MyComponent extends React.Component {
  render() {
    const items = ['item 1', 'item 2', 'item 3'];
    return (
      <ul>
        {items.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    );
  }
}

In this example, the render() function creates an array of strings called items, and then maps over that array to create a list of <li> elements. The key attribute is set to the current index of the item in the array, so that each item in the list has a unique key.

Another example is:

class TodoList extends React.Component {
  render() {
    const todos = [{id:1, task:"Learn React"}, {id:2, task:"Learn Redux"}];
    return (
      <ul>
        {todos.map((todo) => <li key={todo.id}>{todo.task}</li>)}
      </ul>
    );
  }
}

In this example, we have an array of objects each object has a unique id, we use it as key for each item in the list.

 

It's important to note that, in practice, it's usually better to use a unique identifier from your data rather than an index for the key. This ensures that your keys will remain unique even if the order of items changes.

 

Q. What is key concept in react.js?

In React, the "key" concept is used to identify each item in a list of elements so that React can keep track of which items have been added, changed, or removed from the list.

When React renders a list of elements, it uses the key to keep track of each item in the list so that it can efficiently update the DOM when changes are made to the list. This can improve performance by reducing the number of DOM operations that need to be performed.

React requires that each item in a list have a unique key, so that it can keep track of each item correctly. In the above code example, the toString() method is used to convert the number to a string and use it as a unique key.

A key is a special attribute that you should include when creating lists of elements. React uses this key to keep track of each item in the list and it should be unique among its siblings.

 

Q.why used toString in this code?

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

The toString() method is used in this code to provide a unique key for each list item. In React, when a list is rendered, each item in the list should have a unique key so that React can keep track of each item and update the DOM efficiently when changes are made to the list. The toString() method is used here to ensure that each number in the numbers array is converted to a string, which can then be used as a unique key for each list item.

---

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>    {todo.text}
  </li>
);

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs  <li key={index}>    {todo.text}
  </li>
);

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

Here is an in-depth explanation about why keys are necessary if you’re interested in learning more.

---

Recursing On Children

By default, when recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there’s a difference.

For example, when adding an element at the end of the children, converting between these two trees works well:

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

React will match the two <li>first</li> trees, match the two <li>second</li> trees, and then insert the <li>third</li> tree.

If you implement it naively, inserting an element at the beginning has worse performance. For example, converting between these two trees works poorly:

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

React will mutate every child instead of realizing it can keep the <li>Duke</li> and <li>Villanova</li> subtrees intact. This inefficiency can be a problem.

Keys

In order to solve this issue, React supports a key attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. For example, adding a key to our inefficient example above can make the tree conversion efficient:

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

Now React knows that the element with key '2014' is the new one, and the elements with the keys '2015' and '2016' have just moved.

In practice, finding a key is usually not hard. The element you are going to display may already have a unique ID, so the key can just come from your data:

<li key={item.id}>{item.name}</li>

https://www.youtube.com/watch?v=xAqCEBFGdYk 

https://www.mockaroo.com/

Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel

https://github.com/mireu-san/lab-2023-react-ts/tree/main/react-api-filtering-search