Dynamic data not displaying in react native?

Question

I trying the below logic to display dynamic data in my react native. But it only shows data one time, if I refreshes my app, it gives error again and again: Error is like undefined is not an object('data.map') kind of....Can anyone help me if the logic is wrong, I am missing something in my logic ?

The problem is like it hardly displays data one time sometimes.

const [chartData, setChartData] = useState({});

    const chart = () => {
        let status = [];
        let dates = [];
        let count = 0;
        let count1 = 0;
        let count2 = 0;
        let count3 = 0;
        let count4 = 0;

        fetch("<API CALL>")
        .then(res => res.json())
        .then(results => {
            for (const stats of results) {
                if (stats.status == "Open") {
                    count = count + 1;
                }
                else if (stats.status == "Closed") {
                    count1 = count1 + 1;
                }
                else if (stats.status == "Resolved") {
                    count2 = count2 + 1;
                }
                else if (stats.status == "In Process") {
                    count3 = count3 + 1;
                }
            }
            count4 = count3 + count2 + count1 + count;
            setChartData({
                    labels: ["Open", "Closed", "Resolved", "In Process"],
                    datasets: [
                        {
                            data: [count, count1, count2, count3]
                        }
                    ]
            })
        })
        console.log(chartData);
    }

    useEffect(() => {
        chart();
    }, []);

<BarChart
                    style={{ borderRadius: 16 }}
                    data={chartData}
                    width={screenWidth}
                    height={400}
                    chartConfig={chartConfig}
                    verticalLabelRotation={30}
                />

Data which is stored in monogdb atlas

_id:<RANDOM_ID>
name:"Jade Labs access"
request:"Dhanjay"
subject:"PI RPA"
category:"IT"
priority:"High"
desc:"RPA project"
location:"Pune"
status:"Resolved"
date:"2/23/2021"
__v:0
assign:"Dhanjay Bhardwaj"

i belive your problem is is the your when you refresh your app it rerender and and when it rerenders chartdata become {} in usestate since it also rerender ,and useeffect is only called once,thats is why i guess you are seeing data.map — Abd
– Abd, Commented Mar 1, 2021 at 10:13
Ohk, but I how do I fix that then, in functional components I can only use useEffect() — Dhanjay Bhardwaj
– Dhanjay Bhardwaj, Commented Mar 2, 2021 at 5:40
Ok, I have edited my question and added the data which is stored in mongodb atlas — Dhanjay Bhardwaj
– Dhanjay Bhardwaj, Commented Mar 2, 2021 at 5:52

Abd · Accepted Answer · 2021-03-02 08:18:38Z

1

try if this works

   {chartData.datasets != undefined ? (<BarChart
                        style={{ borderRadius: 16 }}
                        data={chartData}
                        width={screenWidth}
                        height={400}
                        chartConfig={chartConfig}
                        verticalLabelRotation={30}
                    />):null}

it should make barchat load when there is data

answered Mar 2, 2021 at 8:18

Abd

5705 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dhanjay Bhardwaj Over a year ago

Ohk, I will try this

Collectives™ on Stack Overflow

Dynamic data not displaying in react native?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related