React konva applies x changing only for 1 rectangle when rendering an array

Question

I have an array of object like this: { id, width, height, margin }. And when i render that array and apply that information to react konva Rect component like this:

{
      topSide.map((seat, index) => (
        <Rect
          id={seat.id}
          key={seat.id}
          fill="brown"
          stroke="white"
          width={seat.width}
          height={seat.height}
          x={topSideStartPosition + index * seat.width + seat.margin}
          y={y * linesHeight - seat.height - 2}
        />
      ))
}

So my problem is seat.margin is applying only for 1 rectangle. Generally i want to apply one value for the first rectangle and other value for rest rectangles. seat.margin is equal 1 if object index in array is 1 and equal 2 if object index is not equal 1. Here's how it looks: result image

score 0 · Answer 1 · answered Dec 11 '18 at 14:00

I think you may need to calculate offset for each seat and use the previous offset for calculating new one for the next seat.

// somewhere in the top of render function
// probably need to adjust for the first seat
let offset = 0; 

// in component:
topSide.map((seat, index) => {
    if (index === 1) {
       offset += seat.width + seat.margin
    } else {
       offset += seat.width
    }
    return <Rect
      id={seat.id}
      key={seat.id}
      fill="brown"
      stroke="white"
      width={seat.width}
      height={seat.height}
      x={offset}
      y={y * linesHeight - seat.height - 2}
    />;
});

Your answer doesn't resolve my issue. But you reminded me about `offset` of the shapes. So i removed my `seat.margin` and used `offsetX` instead. Thank you for your answer) — Maksym Tutskyi, Dec 11 '18 at 15:13

score 0 · Answer 2 · answered Dec 11 '18 at 15:17

So when i tried to move rectangle by adding a margin, it didn't work. So setting offsetX and removing seat.margin, helped me in this case.

Answer for my question:

topSide.map((seat, index) => (
        <Rect
          id={seat.id}
          key={seat.id}
          fill="brown"
          width={seat.width}
          height={seat.height}
          offsetX={-2 * index}
          x={topSideStartPosition + index * seat.width}
          y={y * linesHeight - seat.height - 2}
        />
      ))

React konva applies x changing only for 1 rectangle when rendering an array

2 Answers2