Question 72472 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Unable to convert HTML JS to JSX (ReactJS)

I am trying to map the boxes according to their positions in list and append their classes accordingly
but I am unable to achieve what i want to achieve. The boxes are not getting displayed. I am not getting what is wrong in my code. Can someone please help me with this one?
This is my React JSX Code:

import React from 'react'

const Footer = () => {
    const list = [0, 1, 2, 3, 41, 42, 43, 44, 82, 83, 123, 124, 125, 126, 164, 165, 166, 167, 205, 206, 246, 247, 287, 288, 5, 6, 46, 47, 87, 88, 128, 129, 169, 170, 210, 211, 251, 252, 292, 293, 8, 9, 14, 15, 49, 50, 51, 90, 91, 92, 131, 132, 133, 134, 172, 173, 213, 214, 254, 255, 295, 296, 175, 176, 217, 177, 218, 259, 55, 56, 96, 97, 137, 138, 178, 179, 219, 220, 260, 261, 217, 218, 259, 260, 261, 301, 302, 17, 18, 19, 58, 59, 60, 61, 99, 100, 102, 103, 140, 141, 144, 181, 182, 185, 222, 223, 225, 226, 263, 264, 265, 266, 304, 305, 306, 24, 25, 65, 66, 67, 106, 107, 108, 147, 148, 149, 150, 188, 189, 229, 230, 270, 271, 311, 312, 67, 108, 149, 150, 191, 232, 192, 233, 274, 234, 275, 316, 194, 235, 276, 154, 195, 236, 73, 114, 155, 33, 34, 74, 75, 115, 116, 156, 157, 197, 198, 238, 239, 279, 280, 320, 321, 36, 37, 38, 39, 77, 78, 79, 80, 118, 119, 159, 160, 161, 162, 200, 201, 202, 203, 241, 242, 282, 283, 284, 285, 323, 324, 325, 326,
    ];

    const array = new Array(365);

    return (
        <div id="footer">
            <div className="githubChart">
                <div className="dates">
                    <span>Jan</span>
                    <span>Feb</span>
                    <span>Mar</span>
                    <span>Apr</span>
                    <span>May</span>
                    <span>Jun</span>
                    <span>Jul</span>
                    <span>Aug</span>
                    <span>Sep</span>
                    <span>Oct</span>
                    <span>Nov</span>
                    <span>Dec</span>
                </div>
                <div className="boxContainer">
                    {array.map((index) =>
                        <div className={list.includes(index) ? "box active" : "box"}></div>
                    )}
                </div>
            </div>
        </div>
    )
}

export default Footer

styles.scss

#footer {
    background-color: black;
    height:80vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}
.dates {
    padding: 10px;
    color: #555;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}
.githubChart {
    width: 820px;
    text-align: center;
}

.boxContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
} 


.box {
    width: 15px;
    height: 15px;
    background-color: #171c25;
    border-radius: 2px;
    cursor: pointer;
    transition: 3s all ease;
}
.active:nth-child(4n) {
    background-color: #195b2c;
}

The javascript code through which i was able to get the desired output initially is as follows:

const boxContainer = document.querySelector(".boxContainer");

const list = [0, 1, 2, 3, 41, 42, 43, 44, 82, 83, 123, 124, 125, 126, 164, 165, 166, 167, 205, 206, 246, 247, 287, 288, 5, 6, 46, 47, 87, 88, 128, 129, 169, 170, 210, 211, 251, 252, 292, 293, 8, 9, 14, 15, 49, 50, 51, 90, 91, 92, 131, 132, 133, 134, 172, 173, 213, 214, 254, 255, 295, 296, 175, 176, 217, 177, 218, 259, 55, 56, 96, 97, 137, 138, 178, 179, 219, 220, 260, 261, 217, 218, 259, 260, 261, 301, 302, 17, 18, 19, 58, 59, 60, 61, 99, 100, 102, 103, 140, 141, 144, 181, 182, 185, 222, 223, 225, 226, 263, 264, 265, 266, 304, 305, 306, 24, 25, 65, 66, 67, 106, 107, 108, 147, 148, 149, 150, 188, 189, 229, 230, 270, 271, 311, 312, 67, 108, 149, 150, 191, 232, 192, 233, 274, 234, 275, 316, 194, 235, 276, 154, 195, 236, 73, 114, 155, 33, 34, 74, 75, 115, 116, 156, 157, 197, 198, 238, 239, 279, 280, 320, 321, 36, 37, 38, 39, 77, 78, 79, 80, 118, 119, 159, 160, 161, 162, 200, 201, 202, 203, 241, 242, 282, 283, 284, 285, 323, 324, 325, 326,
];
for (let i = 0; i < 365; i++) {

    const el = document.createElement("div");
    el.classList = list.includes(i)?"box active":"box"
    boxContainer.appendChild(el)
}
Tags:

2

Answers


  1. 0

    I haven’t found the right reference yet, but new Array(365) by itself creates an array with nothing in it and can’t be iterated over, so the call to .map() doesn’t do anything.

    If you don’t care what’s in the array, you can just fill it with zeroes for example:

    const array = new Array(365).fill(0);

    Or if you want the array to be a sequence of its own index values:

    const array = [...Array(365).keys()];
    Login or Signup to reply.
  2. 0

    When you are declaring the array variable, what you are doing is just initializing an array of length 365. The elements would be undefined.
    This is the reason your box is not visible.

    What you need to do instead is map and fill it with number form 1 to 365.
    Here is the updated code:

    const Footer = () => {
    const list = [0, 1, 2, 3, 41, 42, 43, 44, 82, 83, 123, 124, 125, 126, 164, 165, 166, 167, 205, 206, 246, 247, 287, 288, 5, 6, 46, 47, 87, 88, 128, 129, 169, 170, 210, 211, 251, 252, 292, 293, 8, 9, 14, 15, 49, 50, 51, 90, 91, 92, 131, 132, 133, 134, 172, 173, 213, 214, 254, 255, 295, 296, 175, 176, 217, 177, 218, 259, 55, 56, 96, 97, 137, 138, 178, 179, 219, 220, 260, 261, 217, 218, 259, 260, 261, 301, 302, 17, 18, 19, 58, 59, 60, 61, 99, 100, 102, 103, 140, 141, 144, 181, 182, 185, 222, 223, 225, 226, 263, 264, 265, 266, 304, 305, 306, 24, 25, 65, 66, 67, 106, 107, 108, 147, 148, 149, 150, 188, 189, 229, 230, 270, 271, 311, 312, 67, 108, 149, 150, 191, 232, 192, 233, 274, 234, 275, 316, 194, 235, 276, 154, 195, 236, 73, 114, 155, 33, 34, 74, 75, 115, 116, 156, 157, 197, 198, 238, 239, 279, 280, 320, 321, 36, 37, 38, 39, 77, 78, 79, 80, 118, 119, 159, 160, 161, 162, 200, 201, 202, 203, 241, 242, 282, 283, 284, 285, 323, 324, 325, 326,
    ];

    const array = new Array(365).fill().map((_, index) => index + 1);

    return (
        <div id="footer">
            <div className="githubChart">
                <div className="dates">
                    <span>Jan</span>
                    <span>Feb</span>
                    <span>Mar</span>
                    <span>Apr</span>
                    <span>May</span>
                    <span>Jun</span>
                    <span>Jul</span>
                    <span>Aug</span>
                    <span>Sep</span>
                    <span>Oct</span>
                    <span>Nov</span>
                    <span>Dec</span>
                </div>
                <div className="boxContainer">
                    {array.map((index) =>
                        <div className={list.includes(index) ? "box active" : "box"} key={index}></div>
                    )}
                </div>
            </div>
        </div>
    )
}

    PS: You need to add a key attribute to the element inside the return statement of map function in the render method else react will throw a warning

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search