Partial rendering of data

Question

The idea is to display the values of all the ward keys inside the ward_no array. I would like to understand why the dropdown in the image only shows 3(6, 10, 15) values in place of the entire lot i.e 15. Moreover, the pattern in which these values get listed inside of the div is also beyond my understanding. What would I need to do to ensure that I have all the values populating inside the div named ward_option? Also, an explanation for the anomaly would be greatly appreciated as well. The JSON and the code are as follows:

JSON

[
    {
        "district": "Kolkata",
        "ward_no": [
            {
                "ward": "6",     //The values of ward is what I'm after
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
            {
                "ward": "7",
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
            {
                "ward": "9",
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
        ]
    },
    {
        "district": "Hooghly"
        "ward_no": [
            {
                "ward": "10",
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
            {
                "ward": "11",
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
            {
                "ward": "12",
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
        ]
    },
    {
        "district": "Hooghly"
        "ward_no": [
            {
                "ward": "13",
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
            {
                "ward": "14",
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
            {
                "ward": "15",
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
        ]
    }
]

Code

import React, { useState } from "react";
import './ward_no.css';
import { IoMdArrowDropdown } from 'react-icons/io';
import { GoTriangleUp } from 'react-icons/go';
import dummyData from '../../../json_data/dummy_data.json'

const WardNo = () => {
    const [open, setOpen] = useState(false);
    const [wardNumber, setWardNumber] = useState(null);

    const onSelect = (value) => {
        setWardNumber(value);
        setOpen(!open);
    }

    return (
        <div className="ward_no">
            <div className="ward_caption">Ward No</div>
            <div className="ward_block">
                <div className="ward_dropdown">
                    <div className="ward_box">
                        {wardNumber === null ? "Enter Ward Number" : wardNumber}
                    </div>
                    <div className="ward_dropIcon" onClick={() => setOpen(prev => !prev)}>
                        {open ? <GoTriangleUp size={"25px"} /> : <IoMdArrowDropdown size={"30px"} />}
                    </div>
                </div>
                <div className={open ? "ward_option" : "ward_option_block"}>
                    {/* This is where I render the JSON */}
                    {dummyData.map((key, values) => <div className="ward_options" onClick={() => onSelect(dummyData[values].ward_no[values].ward)}>
                        {dummyData[values].ward_no[values].ward}
                        {console.log(`ward-number selected: ${wardNumber}`)}
                    </div>
                    )}
                </div>
            </div>
        </div>
    );
}

export default WardNo;

Answer 1

The problem occurs when you are rendering the JSON. When you map through dummyData, the callback passed to map takes the value as the first argument and the index as the second:

Array.map((value, index) => ...)
Array.map((key, values) => ...) // This is what you have

So let's consider the first iteration of this mapping. The key variable in your code will be:

{
        "district": "Kolkata",
        "ward_no": [
            {
                "ward": "6",     //The values of ward is what I'm after
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
            {
                "ward": "7",
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
            {
                "ward": "9",
                "grievance": [
                    {}........
                ],
                "status": "open"
            },
        ]
    },

and values will be the index, which is 0. Then when you index the dummy data, you are actually saying dummyData[0].ward_no[0].ward, which is only the first number (6 for Kolkata). This would explain why only 3 items are being rendered. What you need is a nested map to go through both of the arrays.

The code should look like this:

{dummyData.map((value, index) => (
  <React.Fragment key={JSON.stringify(value)}>
  {value.ward_no.map((ward_no, ward_index) => (
    <div key={JSON.stringify(ward_no)} className="ward_options" onClick={() => onSelect(ward_no.ward)}>
      {ward_no.ward}
    </div>
  )}
  </React.Fragment>
)

A few things to note:

• The key prop: When rendering dynamic lists of components, usually using map, you should provide a key property to each child. This helps React efficiently render them. You can read up on it in the React docs.
• React.Fragment: A Fragment is pretty much just an empty component which just renders its children. The reason we're using it is so that we can pass the key prop.

Regarding the values being an anomaly, the map only runs 3 times with the index being 0, 1 and 2 on each respective iteration. So your code should be selecting the item at index 0 in 'Kolkata' (6), index 1 in the first 'Hooghly' (11) and index 2 in the second 'Hooghly' (15).

This explains everything except for the 10 (it should be 11). I am not entirely sure as to why this is happening, but some ideas are:

• A bug because of the missing key props (they're important!)
• The JSON you supplied is in the wrong order (which I doubt)

I hope this helped, let me know if you have any more issues.