Parsing error: Unexpected token, expected "," setting my react state

Question

I want to edit the label property but when I try to do it with this this.setState({chartData.datasets[0].label: 'Test'}) it throws me this error: Parsing error: Unexpected token, expected ","

state = {
    chartData: {
      labels: ['monday', 'tuesday', 'wednesday'],
      datasets: [
        {
          label: '',
          data: [40, 32, 70],
          backgroundColor: [
            'rgba(75, 192, 192, 0.6)'
          ],
          borderWidth: 4
        }
      ]
    }
  }

  async componentDidMount() {
    this.getDataSet();
  }

  getDataSet = async () => {
    const res = await axios.get("https://covid.ourworldindata.org/data/ecdc/total_cases.csv");
    const dataSet = res.data;

    this.setState({chartData.datasets[0].label: 'Test'})
  }

The information you need to know is how to update nested state properties in React, which is already answered here: https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react — Wyck, May 05 '20 at 01:37

score 1 · Accepted Answer · answered May 04 '20 at 21:07

1

You can do like this for complex object.

 let object = { ...this.state };
 object.chartData.datasets[0].label = 'Test';
 this.setState(object);

answered May 04 '20 at 21:07

b1617

162
1
2
8

score -1 · Answer 2 · answered May 04 '20 at 20:47

-1

Try:

this.setState((oldState) => ({...oldState, chartData.datasets[0].label: 'Test'}))

May not solve your issue, but at least you won't overwrite your entire state.

answered May 04 '20 at 20:47

Lekoaf

897
7
11

Would that not equal trying to set `{'': 'Test'}` at the top level of the object? – Lekoaf May 04 '20 at 20:57
You may need to desctructure the entire state. – Lekoaf May 04 '20 at 20:58

Parsing error: Unexpected token, expected "," setting my react state

2 Answers2