Dynamically display lines from an array

plotly.js
1

I’m attempting to dynamically display lines in Plotly using an array. I’m using the React library (TypeScript).

I’m able to create lines conditionally, however, I’m struggling to loop over an array and inject them or determine the correct syntax for doing so. Below is my working code - notice that the xGrid.map syntax doesn’t paint the line on the display. Suggestions and help greatly appreciated!

import React from 'react';
import PlotlyChart from 'react-plotlyjs-ts';

const DynamicChart: React.FC = () => {
  const xGrid = [{ xBegin: 150, xEnd: 150, yBegin: 100, yEnd: 500 }];
  const displayLastLine = true;
  return (
    <PlotlyChart
      data={[
        {
          x: [100, 100],
          y: [100, 500],
          mode: 'lines',
          type: 'scatter',
          marker: { color: '#0000ff' },
        },
        xGrid.map((item: any) => {
          return {
            x: [item.xBegin, item.xEnd],
            y: [item.yBegin, item.yEnd],
            mode: 'lines',
            type: 'scatter',
            marker: { color: '#ff0000' },
          };
        }),
        displayLastLine
          ? {
              x: [200, 200],
              y: [100, 500],
              mode: 'lines',
              type: 'scatter',
              marker: { color: '#0000ff' },
            }
          : {},
      ]}
    />
  );
};

export default DynamicChart;