How to not render elements with the same margin in React?

Question

JavaScript

How to not render elements with the same margin in React? That is, there is an array of objects that needs to be displayed, but elements with the same field, for example id (I understand that this cannot be, but as an example), should be displayed only once, and the remaining elements that have the same id should be ignored and displayed further by map other elements that do not have the same id

Answer 1

const array = [
    {
        name: 'Jonh',
        age: 32
    }, {
        name: 'James',
        age: 33
    }, {
        name: 'Jacob',
        age: 33
    }
];

const key = 'age';
const values = new Set();

const filtredArray = array.filter(item => {
    const value = item[key];
    if (!values.has(value)) {
        values.add(value);
        return true;
    }
    return false;
});

Answer 2

It is necessary to submit an array immediately with unique elements, why send extra data?