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

Question

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

В настоящее время все в моем файле компонента:

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>
    )
}

Если вы хотите изменить стиль нескольких итенов, вы можете добавить состояние для сохранения список кратных и функция renderList, которая получает allNumbers var и множественные числа (состояние var). Таким образом, для каждого элемента в списке allNumers вы можете проверить, что он находится внутри множественных номеров, если это правда, измените стиль на «множественный» или что-то в этом роде, если не измените стиль на «box».

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

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

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