I am working with the following array of objects:

```
var persons: {
    label: string;
    value: string;
}[]

```

I iterate over the array like this:

```
   {persons?.map((person) => {
      return (
        <button
          key={person.value}
          data-active={value === person.value}
        >
          {person.label}
        </button>
      );
    })}

```

Now I use destructuring so I don't have to write `person.value` etc all the time, so I don't have redundant code:

```
   {persons?.map(({ value, label }) => {
      return (
        <button
          key={value}
          // data-active={value === person.value}
        >
          {label}
        </button>
      );
    })}

```

But how do I get my boolean now `data-active={value === person.value}` (since now `{value === value}` is always true)?