Question 43645 in Html Question posted in
Some basic documentation can be found here.

React JS if clause not working properly inside HTML

i’m new at react and i’m trying to build a box where i can show data dynamically.

const Widget = ({type}) => {
let data = {
    title:"",
    increase: false,
    amount: 0,
    link:"View Billing",
    icon: <KeyboardArrowUpIcon classname={"icon"}/>

};

I did a switch case to take care of the various types that i received

  switch (type){
    case "Billing":
        data={
            title:"Billing",
            increase: false,
            amount: 4000,
            link:"View Billing",
            icon: <MonetizationOnOutlinedIcon className="icon"/>
        };
        break;

I created the if clause in this way and i want to show an icon depending on the value of increase.

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 result I’m having is

enter image description here

For some reason, that i don’t know, this clause is not passing the icon.

                  {(data.increase)? <KeyboardArrowUpIcon/> + ["20"] : <KeyboardArrowDownIcon/> + ["-13"]}

What am i doing wrong? I tried doing an if inside the div but i couldn’t make it work but like this it kinda works but it doesn’t recognize the icon

Tags:

3

Answers


  1. 0

    This expression doesn’t make any sense:

    <KeyboardArrowUpIcon/> + ["20"]

    You’re trying to add a component to an array. Neither of those things can be meaningfully added to anything. The result is simply the engine converting them to strings and concatenating them.

    If the goal is just to output the component and the string "20" then you can simply output them exactly as that. For the JSX syntax you’d just wrap them in an enclosing element:

    <><KeyboardArrowUpIcon/>20</>

    With spaces for clarity:

    <>
  <KeyboardArrowUpIcon/>
  20
</>
    Login or Signup to reply.
  2. 0

    Try something 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>
);

    The reason why it’s not working is that you are trying to concat the component instance with an array which results in your Object object

    Login or Signup to reply.
  3. 0

    Each React node needs to be under one container. You need to wrap your logic within a div or React.Fragment (shortly <></>).

    {(data.increase) ? 
(<>
<KeyboardArrowUpIcon/> + ["20"]
</>) 
: (<>
<KeyboardArrowDownIcon/> + ["-13"]
</>)}

    But I still do not understand why are you using square brackets for 20 and -13?
    I do not know the logic of your app but I am feeling that your code might be like this.

    {(data.increase) ? 
(<>
<KeyboardArrowUpIcon/>
<div>20</div>
</>) 
: (<>
<KeyboardArrowDownIcon/>
<div>-13</div>
</>)}

    I hope this is the answer that you are asking for.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search