Displaying JSON object in React( JSX ) is giving undefined

Question

In my project I am receiving array from backend in that JSON object is ->

list=[{
deleted: false,
details:{
groupNumber: "123ddd",
insuranceName: "Blue Sheild insurance",
memberId: "12345",
payerId: "21212",
relationToSubscriber: null,
ssn: true,
subscriberDoB: "1991-01-01",
subscriberFirstName: "Payor A",
subscriberLastName: "Added",
subscriberMiddleName: "middle",
},
editStatus: "PENDING",
imageInfo: null,
tier: "PRIMARY",
},]

Passing data from parent component

<div className="insurance-sub-heading">Card detials</div>
            {insuranceList.map((m, index) => (
                <InsuranceList
                    key={index}
                    value={m}
                    index={index}
                    text={getInsuranceStatusText(m.editStatus)}
                />
            ))}
</div>

to child component

const{value}=props
return(
<div className="insurance-body">
                <div className="insurance-icon-name">
                    <div className="drop-down-icon" onClick={() => openDrawer(index)}>
                        <img src={show.visible ? downArrow : rightArrow} />
                    </div>
                    <div className="name-bold">{value.details.insuranceName}</div>
                </div>
                <div className="insurance-icon-name">
                    <div className="insurance-status">{text}</div>
                    <div className="insurance-status-icon">
                        {getInsuranceStatus(value.editStatus)}
                    </div>
                </div>
            </div>
            {show.visible && (
                <div className="dropDown-container">
                    {!value.details.ssn && (
                        <React.Fragment>
                            <div className="text-container">
                                <div className="text-heading">Member / Subscriber ID</div>
                                <div className="text">{value.details.memberId}</div>
                            </div>
                            {/* {value.details.groupNumber.trim() !== '' && ( */}
                            <div className="text-container">
                                <div className="text-heading">Group number</div>
                                 <div className="text">{value.detials.groupNumber}</div>
                            </div>
                            {/* )} */}
                        </React.Fragment>
                    )}
                    <div className="text-container">
                        <div className="text-heading">Subscriber name</div>
                        <div className="text">John (optional middle) Dee</div>
                    </div>
                    <div className="text-container">
                        <div className="text-heading">Subscriber date of birth</div>
                        <div className="text">04/12/2000</div>
                    </div>
                    <div className="text-container">
                        <div className="text-heading">Relationship to the patient</div>
                        <div className="text">Mother</div>
                    </div>
                </div>
            )}
)

Problem which I am facing is when Child component loads it gives error that value.detials.groupNumber is undefined, Although object is present inside the json object. By clicking button I can console the value.detials.groupNumber it prints the data but it is not displaying it on HTML side it shows Empty

Answer 1

Chances there's a list item without a groupNumber

Consider using conditional rendering like this

{value.detials.groupNumber && 
 <div className="text">{value.detials.groupNumber}</div>
}

Note:

You have a typo on, it should be details, and not detials