[SOLVED] Returning an object from a function and passing the reference to a prop gives my TypeScript error. Doesn't happen if object is put straight in prop

Issue

I am doing this:

const getDataForChart = () => {
    const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

    const test = {
        labels,
        datasets: [
            {
                label: 'Dataset 1',
                data: [0, 5, 10, 15],
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.5)',
            },
            {
                label: 'Dataset 2',
                data: [2, 7, 12, 17],
                borderColor: 'rgb(53, 162, 235)',
                backgroundColor: 'rgba(53, 162, 235, 0.5)',
            },
        ],
    };

    return test;
};

And then adding the function reference in the data props of the Line chart like this:

<Line data={getDataForChart} options={options} width={400} height={400} />

Results in the following error:

Property 'datasets' is missing in type '() => { labels: any; datasets: any; }' but required in type 'ChartData<"line", (number | ScatterDataPoint | null)[], unknown>'.

But if I pass the object literal straight in the prop, I don’t get the error and the graph renders successfully.

            <Line
                data={{
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [
                        {
                            label: 'Dataset 1',
                            data: [0, 5, 10, 15],
                            borderColor: 'rgb(255, 99, 132)',
                            backgroundColor: 'rgba(255, 99, 132, 0.5)',
                        },
                        {
                            label: 'Dataset 2',
                            data: [2, 7, 12, 17],
                            borderColor: 'rgb(53, 162, 235)',
                            backgroundColor: 'rgba(53, 162, 235, 0.5)',
                        },
                    ],
                }}
                options={options}
                width={400}
                height={400}
            />

Why is this happening?

Solution

You need to call the function.

<Line data={getDataForChart()} options={options} width={400} height={400} />

Answered By – Anastasia

Answer Checked By – Clifford M. (BugsFixing Volunteer)