Select list item in react, not from client side

Question

Lets say I have a list in react jsx

<ul>
    <li>stuff</>
    <li>stuff</>
    <li>stuff</>
    <li>stuff</>
    <li>stuff</>
</ul>

How would I select one of the list items? I don't mean on the client side in the case I could just attach a click listener. But lets say I get a message from the server that I need to do something with the third item on the list. What I have been doing until now is setting the list items as state and then for example if I want to delete the middle item I simply update the state with a new list that doesn't include the middle item. The problem with this is that if the list is huge it seems bad practice to be constantly deleting and recreating a huge list, or perhaps maybe I don't want to delete/add any list items but do something like add some text or animation to a specific list item.

Answer 1

Use an array of objects

You want to modify a large amount of data constantly without replicating it. You also want additional behavior on some of the item, but not all of them. You are probably using an array right now, which would make it difficult to achieve those things.

An array of objects, on the other hand, allows much more flexibility. Where arrays are indexed, objects can have arbitrary IDs and other properties.

For example:

let myObj = [
{
  id: 0,
  text: 'Text from the DB',
  showSpecialTextColor: false,
  showSpecialAnimation: false,
},
{
  id: 1,
  text: 'Another text value.',
  showSpecialTextColor: false,
  showSpecialAnimation: false,
},
{
  id: 2,
  text: 'This text should display with special styling.',
  showSpecialTextColor: true,
  showSpecialAnimation: true,
},
]

Now you can add or delete items into this parent object based on their id, versus their index. This doesn't require the rest of the object to be replicated or changed.

myObj.map(item => {
            if (item.id = 2) {
                delete item
            }
        })

showSpecialTextColor is an arbitrary property that you can create on your object. You can have your rendering component perform a check for this property and change styling or logic based on its value.

If your database returns your data in an array format, you can always convert it to an object when you first retrieve it from the DB.