Как заставить цикл for работать в функциональном компоненте reactJS

Question

Мне было интересно, могу ли я получить некоторую помощь, в настоящее время я пытаюсь переучить ReactJS, и я работаю над этой задачей, это небольшое приложение, которое поможет детям выучить их таблицы умножения. Когда пользователь нажимает на число в сетке, все числа, кратные этому числу, меняют цвет / что-то делают. В настоящее время у меня есть следующее, но я был бы очень признателен за некоторую помощь с последним битом, если возможно: у
меня есть сопоставление чисел с сеткой, у
меня есть функция, которая находит кратные числа, которое вы проходите, из массива чисел, который у меня есть прошел сквозь,
Но я изо всех сил пытаюсь заставить их работать друг с другом, в настоящий момент у меня есть значение числа, которое пользователь выбирает, когда он щелкает число в сетке, но я не могу использовать это значение в multipleFinderфункция как параметр, он просто не распознает его как второй параметр. Я попытался переместить эту функцию в функциональный компонентMapThis но я продолжал получать ошибку
TypeError: Cannot read property 'length' of undefined
или
TypeError: Cannot read property '0' of undefined
Я пробовал переместить его и изменить код, но, похоже, я получаю те же ошибки или не получаю особого ответа, я пытался заставить это работать уже несколько дней, я думаю, что это может может быть ошибка с петлей? / пытаюсь использовать его в функциональном компоненте. Я не уверен, что я просто на ложном пути к тому, чего пытаюсь достичь, но любая помощь будет очень признательна! Спасибо!:)

Сейчас все в моем файле компонента:

import './NumberGridStyles.css';

// Get all the numbers from 1 - 144
let numbersStart = 1;
let numbersEnd = 144;
let allNumbers = Array(numbersEnd - numbersStart + 1)
    .fill()
    .map(() => numbersStart++);

function MultipleFinder(allthenumbers, multipleno) {
    var multiples = [allNumbers];
    for (var i = 0; i < allthenumbers.length; i++) {
        if (allthenumbers[i] % multipleno === 0) {
            multiples.push(allthenumbers[i]);
        }
    }
    return multiples;
}
// return MultipleFinder();
console.log(MultipleFinder(allNumbers, 20));


// Map all 1 - 144 numbers to the grid
export const MapThis = () => {

    function showTheMultiples(allNumbers) {
        console.log(allNumbers);
        MultipleFinder(allNumbers, 6);
        console.log(MultipleFinder(allNumbers, 10))
    }
    return (
        <div>
            <div className="wrapper">
                {allNumbers.map(allNumbers => (
                    <div className="box" key={allNumbers.toString()} onClick={() => showTheMultiples(allNumbers)}>
                        {allNumbers}
                    </div>
                ))}
            </div>
            <div>
            </div>
        </div>
    )
}

Файл CSS:

body {
    margin: 40px;
  }

  .wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-gap: 10px;
    background-color: #fff;
    color: #444;
  }

  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
  }

Снимок экрана с сеткой и массивом чисел на основе второго параметра, который вы передаете

Answer 1

Я просто изменил имя внутри var allnumbers.map к numberи заменил на него все вхождения внутри карты; и изменил функциюshowTheMultiples чтобы на самом деле показать список всех номеров и список нескольких номеров, и это работает.

export const MapThis = () => {

    function showTheMultiples(number) {
        console.log(allNumbers);
        MultipleFinder(allNumbers, number);
        console.log(MultipleFinder(allNumbers, number))
    }

    return (
        <div>
            <div className="wrapper">
                {allNumbers.map(number => (
                    <div className="box" key={number.toString()} onClick={() => showTheMultiples(number)}>
                        {number}
                    </div>
                ))}
            </div>
            <div>
            </div>
        </div>
    )
}

Если вы хотите изменить стиль нескольких itens, вы можете добавить состояние для сохранения списка кратных чисел и функцию renderList, которая получает allNumbers var и multipleNumbers (state var). Итак, для каждого элемента в списке allNumers вы можете проверить, что он находится в множестве Number, если это правда, измените стиль на "несколько" или что-то в этом роде, если не измените стиль на "коробка".

Если вам нужен пример кода,

Когда пользователь нажимает на число в сетке, все числа, кратные этому числу, меняют цвет / что-то делают.

...попробуйте эту ссылку. Это песочница, в которой решена ваша проблема.