In my React app, I am creating a keyboard using the following component:
Keypad.js
const Keypad = () => {
const letters = [
'Q',
'W',
'E',
'R',
'T',
'Y',
'U',
'I',
'O',
// etc
]
return(
<div>
{letters.map((letter,index) => {
return(
<div className="keyboard-container" key={index}>
<div className="key">{letter}</div>
</div>
)
})}
</div>
)
}
export default Keypad;
I am facing an issue where all the letters are being rendered in a single column instead of rows. How can I correct this problem?
Below is the CSS code used:
.keyboard-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.keyboard-container .key {
width: 60px;
height: 60px;
background-color: #69696d;
}
I have attempted to add inline styles in Keypad.js and also tried utilizing a grid system to organize the items.