Style field not rendering

Question

Consider the following code:

<p
  key={element.text}
  className={element.complete ? "strike" : ""}
  style={{
           borderLeft: `2px solid ${getColor(element)}`,
           color: days < 0 ? "#d9534f" : "whitesmoke",
        }}
 >

and the function getColor:

const getColor = (e) => {
    props.sortedArray.map((element) => {
      if (e.project === element.name) {
        console.log(element.color);
        return element.color;
      }
    });

The object e :

{
complete: false
deadline: Tue Mar 01 2022 00:00:00 GMT+0530 (India Standard Time) {}
priority: "high"
project: "Gravity"
text: "Finish this page"
user: ""
} 

and the object element:

{
color: "#EADBDF"
deadline: Sat Apr 30 2022 21:33:08 GMT+0530 (India Standard Time) {}
description: "oshofchsfhsckjscjksjdchs"
name: "Gravity"
subject: "em"
}

when i console.log(element.color) it shows the expected value(a hex color), but for some reason the style (borderLeft) isnt being rendered. I cant seem to figure out why. Please Help.

Answer 1

Maybe because you're expecting const getColor = (e) => e object in getColor() function, but you providing there an element object.

---

Edit: You do not return the value from getColor() function, that's why the console.log shows you the right value but doesn't return it.

Just simply add a return statement.

const getColor = (e) => {
   return props.sortedArray.map((element) => {
      if (e.project === element.name) {
        console.log(element.color);
        return element.color;
      }
    });

or skip parentasis, and return it like that:

const getColor = (e) => props.sortedArray.map((element) => {
      if (e.project === element.name) {
        console.log(element.color);
        return element.color;
      }
    });

Answer 2

const getColor = (e) => {
    let color = "";
    props.sortedArray.map((element) => {
      if (e.project === element.name) {
        color = element.color;
        return element.color;
      }
    });
    return color;
  };