Considere el siguiente código:
<p key={element.text} className={element.complete ? "strike" : ""} style={{ borderLeft: `2px solid ${getColor(element)}`, color: days < 0 ? "#d9534f" : "whitesmoke", }} > y la función getColor :
const getColor = (e) => { props.sortedArray.map((element) => { if (e.project === element.name) { console.log(element.color); return element.color; } }); El objeto 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: "" } y el element del objeto:
{ color: "#EADBDF" deadline: Sat Apr 30 2022 21:33:08 GMT+0530 (India Standard Time) {} description: "oshofchsfhsckjscjksjdchs" name: "Gravity" subject: "em" } cuando i console.log(element.color) muestra el valor esperado (un color hexadecimal), pero por alguna razón el estilo ( borderLeft ) no se representa. Parece que no puedo entender por qué. Por favor ayuda.
Tal vez porque espera const getColor = (e) => e object en la función getColor() , pero proporciona allí un objeto de element .
Editar: no devuelve el valor de la función getColor() , es por eso que console.log le muestra el valor correcto pero no lo devuelve.
Simplemente agregue una declaración de devolución.
const getColor = (e) => { return props.sortedArray.map((element) => { if (e.project === element.name) { console.log(element.color); return element.color; } });o salte parentasis, y devuélvalo así:
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; };