CODEWITHSUNDEEP
reactjs
Aurora
Aurora

Reputation: 483

Why doesn't my checkboxes show up in react?

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

Upvotes: 0

Views: 58

Answers (1)

Andy Ray
Andy Ray

Reputation: 32076

You don't return your array.

createCheckboxes = () => {
    return this.availableSizes.map((size) => {
        return < Size size={size}/>
    });
}

Upvotes: 1

Related Questions