gistfile1.txt

<div>
{data.filter(e => e.level === 1).map((x, index) => {
          return (
             <div key={x.id}>
              {x.name}
            <div/>
          );
})}
</div>

<div>
{data.filter(e => e.level === 2).map((x, index) => {
          return (
            <div key={x.id}>
              {x.name}
            <div/>
          );
})}
</div>
<div>
{data.filter(e => e.level === 3).map((x, index) => {
          return (
            <div key={x.id}>
              {x.name}
            <div/>
          );
})}
</div>


VS

{data.map((x, index) => {
          return (
            <div>
            {x.level === 1 &&
            <div>
              {x.name}
              </div>
              }
            <div/>
          );
})}

etc...




// inside DATA

{
      "data":       [
                  {
            "name": "Foo",
            "id": 888,
            "level": 1
         },
                  {
            "name": "New",
            "id": 889,
            "level": 2
         },
                  {
            "name": "Bar",
            "id": 890,
            "level": 3
         }
      ]
   },