I'm a beginner in React and I'm attempting to create a dynamic data display box.
const Widget = ({type}) => {
let data = {
title: "",
increase: false,
amount: 0,
link: "View Billing",
icon: <KeyboardArrowUpIcon classname={"icon"}/>
};
To handle the different types that are received, I used a switch case.
switch (type){
case "Billing":
data={
title: "Billing",
increase: false,
amount: 4000,
link: "View Billing",
icon: <MonetizationOnOutlinedIcon className="icon"/>
};
break;
In order to display an icon based on the 'increase' value, I set up the if clause like this.
return(
<div className="widget">
<div className="left">
<span className="title">{data.title}</span>
<span className="counter">{data.amount}</span>
<span className="link">{data.link}</span>
</div>
<div className="right">
<div className="percentage positive">
{(data.increase)? <KeyboardArrowUpIcon/> + ["20"] : <KeyboardArrowDownIcon/> + ["-13"]}
</div>
{data.icon}
</div>
</div>
)
But the output I'm seeing is
https://i.sstatic.net/fWFzp.png
Somehow, for reasons unknown to me, the icon is not being displayed by this clause.
{(data.increase)? <KeyboardArrowUpIcon/> + ["20"] : <KeyboardArrowDownIcon/> + ["-13"]}
What am I missing? I attempted using an if statement within the div but couldn't get it to work. This method sort of works, but it fails to render the icon correctly.