dynamic SVG using array of objects

Question

I am trying to render a line using react-native-svg

  renderBox = (strategy) => {
    const { x, y, fill, lineStartX, lineStartY, lineEndX, lineEndY} = this.getBoxDetails(strategy);

    return (
      <G>
        <Line
          x1={lineStartX}
          y1={lineStartY}
          x2={lineEndX}
          y2={lineEndY}
          stroke="red"
          strokeWidth="2"
        />

      </G>
    );
  };

I like to set the data for the line by using an array of objects in my switch:

switch (strategy) {
  case 'Situations':
    return {
      x: this.diagramWidth / 2 - this.boxWidth / 2,
      y: 5,
      fill: color,
      lines: [{
        lineStartX:  this.diagramWidth / 2,
        lineStartY: this.boxHeight,
        lineEndX: this.diagramWidth - (this.diagramWidth / 4),
        lineEndY: this.boxHeight * 2
      }]
    };

How can I loop through the 'lines' array and generate a line for each object?

You can loop inside jsx using Array.map `{lines.map((props, index) => )}`. Is that what you mean? — Håken Lid, Jul 13 '17 at 11:41
Possible duplicate of [loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Håken Lid, Jul 13 '17 at 11:44

score 0 · Answer 1 · answered Jul 13 '17 at 11:43

lines is not in your destructuring of the getBoxDetails call. Try replacing this:

const { x, y, fill, lineStartX, lineStartY, lineEndX, lineEndY} = this.getBoxDetails(strategy);

with:

const { x, y, fill, lines} = this.getBoxDetails(strategy);

and then iterate over this using .map:

return (
  <G>
  { 
    lines.map( (line, index) => {
      return (<Line
        key={ index }
        x1={line.lineStartX}
        y1={line.lineStartY}
        x2={line.lineEndX}
        y2={line.lineEndY}
        stroke="red"
        strokeWidth="2"
      />);
      }
    )
  }
  </G>
);

dynamic SVG using array of objects

1 Answers1