Javascript / React - получение первого элемента в массиве, который соответствует указанным c условиям

Question

У меня есть массив, скажем

[
    {
        lesson: 1,
        title: "Welcome",
        slug: "welcome",
        active: active,
        breakDay: false,
        started_time: new Date(),
        finished_time: null,
        completed: true,
        sublesson: [
            {
                lesson: 1.1,
                title: "Evaluation",
                slug: 'evaluation',
                completed: false,
                answers: []
            }
        ],
        answers: []
    },
    {
        lesson: 2,
        title: "Example",
        slug: "example",
        active: active,
        breakDay: false,
        started_time: null,
        finished_time: null,
        completed: false,
        sublesson: [
            {
                lesson: 2.1,
                title: "example2,
                slug: 'example2,
                answers: []
            }
        ],
        answers: []
    }
]

Мне нужно найти способ отобразить первый элемент, чтобы достичь определенных c условий.

Я пробовал в своем приложении React , но быстро понял, что на самом деле он проверяет, выполняются ли эти условия для первого элемента, а не для всего массива.

    {
        lessons !== null ?

            lessons.map((item, index, arr) => (
                index === 0 && item.active === true ?
                <>
                <p>{item.title}</p>
                </>
                :
                null
            ))
            :
            null

    }

Итак, по сути, как я могу отфильтровать первый элемент, чтобы удовлетворить определенные условия c, например item.active === true && item.completed === false?

Answer 1

Вам может понадобиться filter здесь:

var data=[ { lesson: 1, title: "Welcome", slug: "welcome", active: 'active', breakDay: false, started_time: new Date(), finished_time: null, completed: true, sublesson: [ { lesson: 1.1, title: "Evaluation", slug: 'evaluation', completed: false, answers: [] } ], answers: [] }, { lesson: 2, title: "Example", slug: "example", active: 'active', breakDay: false, started_time: null, finished_time: null, completed: false, sublesson: [ { lesson: 2.1, title: "example2", slug: 'example2', answers: [] } ], answers: [] }];

var result = data.filter(({active, completed})=> active && !completed);

console.log(result);

Или find, чтобы получить первый соответствующий объект:

var data=[ { lesson: 1, title: "Welcome", slug: "welcome", active: 'active', breakDay: false, started_time: new Date(), finished_time: null, completed: true, sublesson: [ { lesson: 1.1, title: "Evaluation", slug: 'evaluation', completed: false, answers: [] } ], answers: [] }, { lesson: 2, title: "Example", slug: "example", active: 'active', breakDay: false, started_time: null, finished_time: null, completed: false, sublesson: [ { lesson: 2.1, title: "example2", slug: 'example2', answers: [] } ], answers: [] }];

var result = data.find(({active, completed})=> active && !completed);

console.log(result);

Answer 2

const arr = [
    {
        lesson: 1,
        title: "Welcome",
        slug: "welcome",
        active: false,
    },
    {
        lesson: 2,
        title: "Welcome 2",
        slug: "welcome",
        active: true,
    },
    {
        lesson: 3,
        title: "Example 3",
        slug: "example",
        active: true,
    }
]

console.log(arr.find(item => item.active))

Думаю, вы можете использовать функцию Array.prototype.find https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find