React.js: function not returning CSS when using Map

Question

I have a function that maps an array and checks what the status is of each record. Each month has a status 1, 2 or 3 that are checked in if statement. These then return some CSS that change the color of an icon.

_infoIconStyle() {

    //test array
    let monthArr = [
        {month:'jan', status: 1},
        {month:'feb', status: 2},
        {month:'mar', status: ''},
        {month:'apr', status: 1},
        {month:'may', status: 2},
        {month:'jun', status: ''},
        {month:'jul', status: 1},
        {month:'aug', status: 2},
        {month:'sep', status: ''},
        {month:'oct', status: 1},
        {month:'nov', status: 2},
        {month:'dec', status: ''}
    ]
    //

    monthArr.map((monthRecord) => {

        if(monthRecord.status == 1) {
            const infoStyle = { 
                color:  "red"
            };

            return infoStyle

        } else if(monthRecord.status  == 2) {
            const infoStyle = { 
                color:  "orange"
            };

            return infoStyle

        } else {
            const infoStyle = { 
                color:  "green"
            };

            return infoStyle

        } 
    })
}

I was seeing exactly what I expected in console.log without the map . But since I added map no CSS is being returned.

I haven't been using ES6 for long and I'm sure it's something simple. Can someone help.. Thank you.

Answer 1

Maybe this is an answer for you, i think your return is not far enough and you have no default state, in my opinion you should try something like, but i'm also new to ES6, just a hint:

let newcssvar =    monthArr.map((monthRecord) => {
   let infoStyle={color:"defaulcolor-whatever"};
    if(monthRecord.status == 1) {
         infoStyle = { 
            color:  "red"
        };

        return infoStyle

    } else if(monthRecord.status  == 2) {
         infoStyle = { 
            color:  "orange"
        };

        return infoStyle

    } else {
         infoStyle = { 
            color:  "green"
        };

        return infoStyle

    }

  return infoStyle

})

Answer 2

Because you are not returning anything from _infoIconStyle function. Another thing is map will return an array not a single css object.

To return the result of map:

_infoIconStyle(){
   ....
   return monthArr.map((monthRecord) => {   //use return here
       ....
   }
   ....
}

What _infoIconStyle function will return if you return the map result:

[{...}, {...}, {...}, {..}, {...}, ....]

Answer 3

So the map function actually returns another array. In your case, you're calling the map function but not assigning the output to anything. If you were to assign that to a variable, you'd have an array of colors. One thing you could try is having a dictionary of statuses and colors, rather than using map to just get a color array. You could also map through your initial array and attach a color property to each object in your monthArr variable.

Answer 4

monthArr.map(monthRecord(month, i) => {
    if(month[i].status == 1) {
        return month[i].color = "red"
    };
    return monthArr

This type of function will add the respective color property to each month in the loop. I only wrote a snippet since I won't have time to provide a full answer until after work. You'll need an additional function to create a style sheet. Are you trying to render the styles inline with JSX? I need more info for a better example. If you're trying to create new objects rather than modify the current one, you can use this function alongside object.Assign..