Can't use map function inside React render

Question

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>
);
}
}

You need to wrap it in {} brackets like {data.map((typeArr, idx) => { ...})}. But you have too much nested map so syntax is not the only problem you have — Prakash Sharma
– Prakash Sharma, Commented Jan 11, 2018 at 19:57
@Prakashsharma why several nested maps is considered a bad practice, if I understand you correctly? — Nikita Vlasenko
– Nikita Vlasenko, Commented Jan 11, 2018 at 20:03
@NikitaVlasenko I am not saying it is bad practice. I mean your code will not render array of ColoredCircle elements because of nested map. — Prakash Sharma
– Prakash Sharma, Commented Jan 11, 2018 at 20:08

Shubham Khatri · Accepted Answer · 2018-01-11 19:58:56Z

1

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>

answered Jan 11, 2018 at 19:58

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't use map function inside React render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related