With the following code, I want to change the text color whenever the material tab is switched. First of all, to explain the code I suggested, I am going to make a function implemented to change the table text color according to the range of each substance and operate it as an onToggle event in the return statement. How can I modify it while keeping the current logic as much as possible?
function DashBoard() {
const [activeColor, setActiveColor] = useState("");
// A function implemented to change the table text color according to the range of each substance
const textColorChange = (e, value) => {
let colorMapping = [
{ range: [15, 35, 75], colors: ["#2359C5", "#01B56E", "#F5C932", "#DA3539", "#666666"] },
{ range: [30, 80, 150], colors: ["#2359C5", "#01B56E", "#F5C932", "#DA3539", "#666666"] },
{ range: [0.03, 0.09, 0.15], colors: ["#2359C5", "#01B56E", "#F5C932", "#DA3539", "#666666"] },
{ range: [0.03, 0.06, 0.2], colors: ["#2359C5", "#01B56E", "#F5C932", "#DA3539", "#666666"] },
{ range: [0.02, 0.05, 0.15], colors: ["#2359C5", "#01B56E", "#F5C932", "#DA3539", "#666666"] },
{ range: [2, 9, 15], colors: ["#2359C5", "#01B56E", "#F5C932", "#DA3539", "#666666"] }
];
switch(e.target.id) {
case "tabPage0":
for (let pm2Dot5 of colorMapping) {
value <= pm2Dot5[0].range[0] ? setActiveColor(pm2Dot5[0].colors[0])
: pm2Dot5[0].range[0] < value && value <= pm2Dot5[0].range[1] ? setActiveColor(pm2Dot5[0].colors[1])
: pm2Dot5[0].range[1] < value && value <= pm2Dot5[0].range[2] ? setActiveColor(pm2Dot5[0].colors[2])
: pm2Dot5[0].range[2] > value ? setActiveColor(pm2Dot5[0].colors[3])
: setActiveColor(pm2Dot5[0].colors[4]);
};
break;
case "tabPage1":
for (let pm10 of colorMapping) {
value <= pm10[1].range[0] ? setActiveColor(pm10[1].colors[0])
: pm10[1].range[0] < value && value <= pm10[1].range[1] ? setActiveColor(pm10[1].colors[1])
: pm10[1].range[1] < value && value <= pm10[1].range[2] ? setActiveColor(pm10[1].colors[2])
: pm10[1].range[2] > value ? setActiveColor(pm10[1].colors[3])
: setActiveColor(pm10[1].colors[4]);
};
break;
case "tabPage2":
for (let o3 of colorMapping) {
value <= o3[2].range[0] ? setActiveColor(o3[2].colors[0])
: o3[2].range[0] < value && value <= o3[2].range[1] ? setActiveColor(o3[2].colors[1])
: o3[2].range[1] < value && value <= o3[2].range[2] ? setActiveColor(o3[2].colors[2])
: o3[2].range[2] > value ? setActiveColor(o3[2].colors[3])
: setActiveColor(o3[2].colors[4]);
};
break;
case "tabPage3":
for (let no2 of colorMapping) {
value <= no2[3].range[0] ? setActiveColor(no2[3].colors[0])
: no2[3].range[0] < value && value <= no2[3].range[1] ? setActiveColor(no2[3].colors[1])
: no2[3].range[1] < value && value <= no2[3].range[2] ? setActiveColor(no2[3].colors[2])
: no2[3].range[2] > value ? setActiveColor(no2[3].colors[3])
: setActiveColor(no2[3].colors[4]);
};
break;
case "tabPage4":
for (let so2 of colorMapping) {
value <= so2[4].range[0] ? setActiveColor(so2[4].colors[0])
: so2[4].range[0] < value && value <= so2[4].range[1] ? setActiveColor(so2[4].colors[1])
: so2[4].range[1] < value && value <= so2[4].range[2] ? setActiveColor(so2[4].colors[2])
: so2[4].range[2] > value ? setActiveColor(so2[4].colors[3])
: setActiveColor(so2[4].colors[4]);
};
break;
default:
for (let co of colorMapping) {
value <= co[5].range[0] ? setActiveColor(co[5].colors[0])
: co[5].range[0] < value && value <= co[5].range[1] ? setActiveColor(co[5].colors[1])
: co[5].range[1] < value && value <= co[5].range[2] ? setActiveColor(co[5].colors[2])
: co[5].range[2] > value ? setActiveColor(co[5].colors[3])
: setActiveColor(co[5].colors[4]);
};
break;
};
};
return (
<Style.Table>
<Style.Title className="caption-text" onToggle={tabHandler}>{airTitle}</Style.Title>
<Style.StyledTable>
<tbody>
{regionList.map((region, index) => (
<tr key={index}>
<td className="region">{region.sidoNm}</td>
<td className="number" onToggle={e => textColorChange(e, region.avgNow)} style={{ color: e => textColorChange(e, region.avgNow) }}>{region.avgNow}</td>
<td className="number" onToggle={e => textColorChange(e, region.avgTd)} style={{ color: e => textColorChange(e, region.avgTd) }}>{region.avgTd}</td>
<td className="number" onToggle={e => textColorChange(e, region.max)} style={{ color: e => textColorChange(e, region.max) }}>{region.max}</td>
<td className="number" onToggle={e => textColorChange(e, region.min)} style={{ color: e => textColorChange(e, region.min) }}>{region.min}</td>
<td className="number" onToggle={e => textColorChange(e, region.avgYd)} style={{ color: e => textColorChange(e, region.avgYd) }}>{region.avgYd}</td>
</tr>
))}
</tbody>
</Style.StyledTable>
</Style.Table>
);
}
2
Answers
}
It looks like you’re working with React and attempting to modify the text color based on certain conditions and the active tab. I’ll help you modify the code to achieve this while keeping the logic intact.
However, it seems that there are some issues in your current code that need to be addressed. It looks like you’re using an array of objects, but your indexing and logic inside the switch statement are incorrect. Also, the range checks and comparisons are not accurate. I’ll provide you with a corrected version of the code: