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.
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;
}
});
const getColor = (e) => {
let color = "";
props.sortedArray.map((element) => {
if (e.project === element.name) {
color = element.color;
return element.color;
}
});
return color;
};