I am using recharts within a react component. I am attempting to reset data within:

```
const [data, setData] = useState([]);

```

currently I set the data as such:

```
const getData = (accData) => {
setData((currentData) => [...currentData, accData]);};

```

The data is sent to getData on a buttonClick. The idea is on every button click reset data and display just the new data. Yet the chart is displaying old data and the new therefore not resetting data. I cant seem to figure out how to reset data completely.

As you can see here the values are not resetting.

<https://i.stack.imgur.com/QZmkv.png>
<https://i.stack.imgur.com/dW0T9.png>

<https://i.stack.imgur.com/XoWpF.png>

Button Click

```
     <Button
          style={{ backgroundColor: "red", fontSize: 15, color: "#FFFFFF" }}
          variant="contained"
          onClick={() => {
            onTestClick("startTest");
          }}
        >
          Start Test
          {<PlayCircleFilledWhiteIcon style={{ marginLeft: 10 }} />}
        </Button>

```

onTestClick function

```
const onTestClick = (command) => {
console.log("On Test Command: ", command);
socket.emit("Test_Commands", command);
socket.on("limits", (limitData) => {
  setLimits(limitData);
});

socket.on("test_data", (data) => getData(data));

```

};

Aidan:

<https://i.stack.imgur.com/o65HN.png>

First Start Test button click:

<https://i.stack.imgur.com/w8uIz.png>

Second Start Test button click:

<https://i.stack.imgur.com/PngH4.png>

LineChart:

```
<Grid item>
      <LineChart width={1000} height={240} data={data}>
        <defs>
          <linearGradient id="gradient" x1="0" y1="0" x2="100%" y2="0">
            <stop offset="0%" stopColor="red" />

            <stop offset="100%" stopColor="black" />
          </linearGradient>
        </defs>
        <CartesianGrid strokeDasharray="3 3" />
        <Line
          type="monotone"
          dataKey="value"
          stroke="#e82420"
          strokeDasharray="5 5"
        />
        <ReferenceLine y={lowerLimit} stroke="orange" alwaysShow={true} />
        <ReferenceLine y={threshold} stroke="green" alwaysShow={true} />
        <ReferenceLine y={upperLimit} stroke="orange" alwaysShow={true} />
        <XAxis dataKey="Time" />
        <YAxis dataKey="Value" />
      </LineChart>
    </Grid>
    <Grid item>

```