#Does anyone know how I can refactor this?

1 messages · Page 1 of 1 (latest)

burnt barn
#

@red bramble Can you send the code as text (e.g. sandbox) not as a screenshot?

#

I would probably put the repeated sections in a function, personally.

red bramble
#

Sure

#

Hope this helps @burnt barn

burnt barn
#

@red bramble Should be able do something like this:

function renderRow(row: Whatever[], css: string) {
    return (
        <div className={[css.keyboardRow, css].join(" ")}>
            {row.map((character) => (
                <div
                    className={css.keyboardButton}
                    onTouchStart={() => {
                        handleInputByAppending("mobile-keyboard", character);
                    }}
                    key={character}
                >
                    {character}
                </div>
            ))}
        </div>
    );
}

return <>
    {renderRow(firstRow, css.keyboardRowOne)}
    {renderRow(secondRow, css.keyboardRowTwo)}
    {renderRow(thirdRow, css.keyboardRowThree)}
    </>
#

Some people would make it its own component, and you could, but I don't know if it's necessary.