使用map函数返回jsx

Question

I am new to react-redux . Here what I am doing is ,

return analitics.map(analiticss => (
  <div className="col-md-8 d-flex justify-content-around questionDetailRow1">
    <div>
      <span>
        <i
          className="fa fa-check-circle"
          style={{ fontSize: "24px", color: "green" }}
        />
      </span>
      <span className="ml-2">
        {analitics.wrong ? `${analitics.wrong}` : "0"}
      </span>
    </div>
    <div>
      <span>
        <i
          class="fa fa-times-circle"
          style={{ fontSize: "24px", color: "red" }}
        />
      </span>
      <span className="ml-2">{analiticss.wrong}</span>
    </div>
    <div>
      <span className="skip-background">
        <i className="fa fa-fast-forward" style={{ color: "black" }} />
      </span>
      <span className="ml-2">{analiticss.skipped}</span>
    </div>
    <button type="button" className="btn btn-outline-primary">
      Change
    </button>
  </div>
));

So, here I want to have this div on any condition. so what happens is ,

if the analiticss is not present then this will not get return. Because that there is no element to iterate.

so, I want to show that values as a `0.{analiticss.skipped} this values.

But it does not return this element as it does not have any array element.

One solution that I have is to use if else with expplicitely adding same html in this with 0 values.

But I don't think its a right solution. is there any onther solution that I can use ?

Answer 1

If you want to still have the wrapper div visible, you need to move the map function inside of the wrapper div. Something like:

<div className="col-md-8 d-flex justify-content-around questionDetailRow1"> {analytics.map(...)} </div>

Answer 2

You can try this Sandbox Link.

I have added your code and there is no data inside the analytics.

https://codesandbox.io/s/zwr8391y24

Still you will see the Skipped