Can't use map function inside React render

I am trying to use map() function to iterate over a 3D array in Reacts' render method, but somehow it is not working and webpack complaints that there is an unexpected token. Here is the full code of my class:

class ExpressionGraph extends Component {
render() {
  const offsetX = - window.innerWidth / 4;
  const offsetY = - window.innerHeight / 4;
const x = 20;
const y = 20;
console.log(test_data["data"]);
const data = test_data["data"];

return (
  <Stage width={window.innerWidth} height={window.innerHeight}>
    <Layer offsetX={offsetX} offsetY={offsetY}>

not working -------> data.map((typeArr, idx) => {

        console.log(typeArr);
        console.log(idx);
        typeArr.map((neuronArr, typeIdx) => {
          const numOfPoints = neuronArr[0].length;
          const circleColor = Konva.Util.getRandomColor();
          [...Array(numOfPoints)].map((_, pointIdx) => {
            const x = neuronArr[0][pointIdx];
            const y = neuronArr[1][pointIdx];
            console.log("x: " + x);
            console.log("y: " + y);
            console.log("circleColor: " + circleColor);
            return <ColoredCircle x={x} y={y} color={circleColor}/>
          })
        })
      })
    </Layer>
  </Stage>
);
}
}

1 answer

  • answered 2018-01-11 19:58 Shubham Khatri

    Wrap your map statement within {}

       {data.map((typeArr, idx) => {
    
        console.log(typeArr);
        console.log(idx);
        typeArr.map((neuronArr, typeIdx) => {
          const numOfPoints = neuronArr[0].length;
          const circleColor = Konva.Util.getRandomColor();
          [...Array(numOfPoints)].map((_, pointIdx) => {
            const x = neuronArr[0][pointIdx];
            const y = neuronArr[1][pointIdx];
            console.log("x: " + x);
            console.log("y: " + y);
            console.log("circleColor: " + circleColor);
            return <ColoredCircle x={x} y={y} color={circleColor}/>
          })
        })
      })}
    </Layer>