Making a Collatz Conjecture Application: List Output

HTML lists in React

Most HTML elements are used in React applications without any special issue, but lists are different. Because React wants to make minimal changes when there are updates, it needs to know which items in a list have changed. The solution to this is to create each list element with a unique key attribute. The key attribute is used by React to manage changes but it is not rendered in HTML.

Here’s one way to create the Collatz output as a list rather than as a string.

---

Note: that only the Collatz component is altered, but the App component remains the same.