css styling in react component - css

Question

I'd like to show the buttons row direction.
I've given disply:flex but it still shows column.
It should be the button has a first character of the name which is underneath the button
and these buttons should be next to each other.
Not like button on the left and the name on the right.
Would be appreciated if I could get help.
RoomList.js
import React from 'react';
import './RoomList.css';
import PropTypes from 'prop-types';
const RoomList = ({ roomList }) => {
return (
<div>
{roomList.map((room) => {
const firstToChar = room.split('');
const firstChar = firstToChar[0];
return (
<div>
<li className="list">
<div className="room-list">
<button type="submit">{firstChar}</button>
<div>{room}</div>
</div>
</li>
</div>
);
})}
</div>
);
};
RoomList.propTypes = {
roomList: PropTypes.func.isRequired,
};
export default RoomList;
RoomList.css
button {
height: 40px;
min-width: 40px;
display: block;
border-radius: 50%;
margin-bottom: 5px;
}
.room-list {
}
.list {
list-style-type: none;
display: flex;
}

Answer 1

The problem is with the HTML you produce. You produce one list by room. Which is not what you want, you want one list, and one item by room in your list.
button {
height: 40px;
min-width: 40px;
display: block;
border-radius: 50%;
margin-bottom: 5px;
}
.room-list {
}
.list {
list-style-type: none;
display: flex;
}
<div>
<div>
<li class="list">
<div class="room-list">
<button type="submit">K</button>
<div>Kitchen</div>
</div>
</li>
</div>
<div>
<li class="list">
<div class="room-list">
<button type="submit">B</button>
<div>Bathroom</div>
</div>
</li>
</div>
</div>
What you want is:
button {
height: 40px;
min-width: 40px;
display: block;
border-radius: 50%;
margin-bottom: 5px;
}
.room-list {
}
.list {
list-style-type: none;
display: flex;
}
<div>
<div>
<li class="list">
<div class="room-list">
<button type="submit">K</button>
<div>Kitchen</div>
</div>
<div class="room-list">
<button type="submit">B</button>
<div>Bathroom</div>
</div>
</li>
</div>
</div>
So you actually want:
const RoomList = ({ roomList }) => {
return (
<div>
<div>
<li className="list">
{roomList.map((room) => {
const firstToChar = room.split('');
const firstChar = firstToChar[0];
return (
<div className="room-list">
<button type="submit">{firstChar}</button>
<div>{room}</div>
</div>
);
})}
</li>
</div>
</div>
);
};

Answer 2

The flex should be on the room list instead