Why doesn't my checkboxes show up in react? - reactjs

Question

I have a problem that the Size component didn't show up on the web page. Could someone help me figure it out?
This is my file hierarchy:
components
CheckBoxes
index.js
style.css
Shelf
Filter
index.js
style.css
This is my "components/Shelf/Filter/index.js":
import React, { Component } from 'react';
import Size from '../../CheckBoxes/index';
class SizePart extends Component {
availableSizes = ['XS', 'S', 'M', 'ML', 'L', 'XL', 'XXL'];
createCheckboxes = () => {
this.availableSizes.map((size) => {
return < Size size={size}/>
});
}
render(){
return (
<div className="filters">
<h4 className="title">Sizes:</h4>
{this.createCheckboxes()}
</div>
)
}
}
export default SizePart;
This is my "components/CheckBoxes/index.js" and "components/CheckBoxes/style.css":
import React, { Component } from 'react';
import "./style.css";
const Size = props => {
return <div className='size'>{props.size}</div>
}
export default Size;
///////////////////////////////////////////////////////////////////////
.size {
background-color: rgb(223, 220, 220);
display: inline-block;
position: relative;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 35px;
height: 35px;
font-size: 0.8em;
margin-bottom: 8px;
margin-right: 8px;
border-radius: 50%;
line-height: 35px;
text-align: center;
}
.size:hover {
border: 1px solid #1b1a20;
}

Answer 1

You don't return your array.
createCheckboxes = () => {
return this.availableSizes.map((size) => {
return < Size size={size}/>
});
}