Добавьте классы после 2-х циклов по реакции, используя карту

Question

Я пытаюсь добавить классы после 2 циклов.Это работает, но не может скрыть {x++} текст.Как можно это скрыть?Я также пытался с использованием индекса.

const workdata = this.state.worksData.map((work, index) => (
            <div
                className={
                    x % 3 == 0
                        ? "col-lg-4 col-md-6 offset-lg-0 offset-md-3"
                        : "col-lg-4 col-md-6"
                }
                key={index}
            >
                <div
                    className={
                        x % 3 == 0 ? "single-box" : "single-box with-line"
                    }
                >
                    <span>{work.position}</span>
                </div>
                {x++}
            </div>
        ));

использование для цикла, и это работает.

for (let i = 0; i < data.length; i++) {
        if (x % 3 == 0) {
            console.log("Class", data[i]);
        } else {
            console.log(data[i]);
        }
        x++;
    }

Answer 1

Вы должны использовать существующее свойство индекса вместо создания нового x.Пожалуйста, смотрите ниже пример кода

const workdays = this.state.worksData.map((work, index) => (
            <div
                className={
                    (index + 1) % 3 == 0
                        ? "col-lg-4 col-md-6 offset-lg-0 offset-md-3"
                        : "col-lg-4 col-md-6"
                }
            >
                <div
                    className={
                        (index + 1) % 3 == 0 ? "single-box" : "single-box with-line"
                    }
                >
                    <span>{work.position}</span>
                </div>
            </div>
        ));