React - условный рендеринг (итерация из нескольких массивов)

Question

Привет, ребята, в настоящее время у меня есть проблема условного рендеринга в реакции.

У меня есть 2 массива, сохраненных в состоянии:

this.state = {
   arr_one:[1,2,3,4,5],
   arr_two:[1,3,5]
};

Я хочу визуализировать итерацию divs с этим массивом и условием, если элементы в arr_two существуют в arr_one, а затем визуализировать отличительные элементы div.

примечание: я не хочу исправлять это с условием модуля (%).

Вот мой код:

Код:

class TestComp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            arr_one:[1,2,3,4,5],
            arr_two:[1,3,5]
        };
    }


    render() {
        const filteredStyle={
            background:'red'
        }
        return (
            <div className="wrapper">
            {
                this.state.arr_one.map((item,index)=>
                    index === this.state.arr_two[index]?
                        <div key={index} className={filteredStyle}>
                            <p>Item {item}</p>
                        </div>
                    : 
                        <div key={index}>
                            <p>I'm not in filter! {item}</p>
                        </div>
                )               
            }

            </div>
        )
    }
}

Выход:

Я не в фильтре! 1

Я не в фильтре! 2

Я не в фильтре! 3

Я не в фильтре! 4

Я не в фильтре! 5

Ожидаемый результат:

Элемент 1

Я не в фильтре! 2

Позиция 3

Я не в фильтре! 4

Позиция 5

У меня также есть код демонстрации в CodeSandBox

Answer 1

Вы можете исправить условие index === this.state.arr_two[index], используя , включая , до:

this.state.arr_two.includes(item)

Answer 2

Вы сравниваете индекс arr_one со значением arr_two

И я не понимаю, когда ваше arr_one имеет значение, равное 0, но ваш вывод не