if else inside map function

Question

I got an error:

Cannot read property 'map' of undefined

My JSON data:

{
    "data": [
        {
            "id": 1,
            "attention": 1
        },
        {
            "id": 2,
            "attention": 1
        },
        {
            "id": 3,
            "attention": 0
        }
    ]
}
_handleOutput() {
    var att = data.attention.map(function (data) {
      return data.attention
    });
}
console.log(att)

Is it possible to use if-else to compare the JSON output data to React DOM ? Something like this:

if (data.attention === true || "1") {
    return <span>&#9989;</span>;
} else {
    return <span>&#10060;</span>;
}

then i output into table list <td>{this._handleOutput()}</td>

Answer 1

let obj = {
    data: [
        {
            id: 1,
            attention: 1
        },
        {
            id: 2,
            attention: 2
        },
        {
            id: 3,
            attention: 0
        }
    ]
}

inside component define render function

render(){
return (
    <div>
     {obj.data.map(a=>{
      if(a.attention===1) 
       return <span>&#9989;</span>

       return <span>&#10060;</span>;  
     })}
    </div> 
  )
  }

Answer 2

data is array , not data.attention for this map is not working. map is working in the array.

Answer 3

You're trying to call map on a number field. It should be data.map instead.

Answer 4

Data is your array not data.attention. So use like this:

 {
        "data": [
            {
                "id": 1,
                "attention": 1
            },
            {
                "id": 2,
                "attention": 2
            },
            {
                "id": 3,
                "attention": 0
            }
        ]
    }

    var att = data.map(function (data) {
      return data.attention
    });
    console.log(att)

Answer 5

var data = [
    {
        "id": 1,
        "attention": 1
    },
    {
        "id": 2,
        "attention": 2
    },
    {
        "id": 3,
        "attention": 0
    }
]

var att = data.map(data => {
  console.log(data);

  if (data.attention === 1) {
    return '<span>&#9989;</span>';
  } else {
    return 'Not Fount';
  }
});

console.log(att);

Answer 6

Mistake in the tried solution

1. data.attention is not an array.
2. Check directly with value 1

Solution

• Using Array.map to return a copy of jsx elements.
• Using destructuring while looping through the array instead of writing item.attention
• Checking the value so basically we can use ternary check (true? 1: 0), since the value of attention is either 1 or 0 which represents true or false we can use it in this way.

Notes to improve

• Instead of using wrapping with div you can use React fragments

 const jsonData = { "data": [{ "id": 1, "attention": 1 }, { "id": 2, "attention": 1 }, { "id": 3, "attention": 0 } ] } const App = () => { return ( <div> { jsonData.data.map(({attention}) => { return ( <div> { attention? <span>&#9989;</span>: <span>&#10060;</span> } </div> ) }) } </div> ) } ReactDOM.render(<App />, document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='root'></div>