Displaying JSON object in React( JSX ) is giving undefined - json

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