How to render JSON attributes conditionally in React – Render if the attribute exists

I am reading a JSON file in react. In some records the attribute Attachments exists which is basically an array and in some records it doesn’t. I am trying to apply an conditional render where it will check if the attribute exists in the record, then it will render it’s elements otherwise it will skip the record. It is giving me an error of "Cannot read properties of undefined (reading ‘map’)". My code is below:

 {data.map((record) => (
                        <tr>
                            <td>{record.UniqueName}</td>
                            <td>{record.StatusString}</td>
                            <React.Fragment>
                                if (!record.Attachments) {
                                    <React.Fragment>
                                                {record.Attachments.map((line, index) => (
                                                    <React.Fragment>
                                                        <td>{line.uniqueAttachmentId}</td>
                                                        <td>{line.Filename}</td>
                                                        <td>{line.id}</td>
                                                    </React.Fragment>
                                                ))}
                                    </React.Fragment>
                                }
                            </React.Fragment>
                        </tr>
                     ))}

And the JSON sample is here.

[
{
    "StatusString": "Received",
    "UniqueName": "PR95291",
    "Attachments": [
        {
            "uniqueAttachmentId": "QUZLeUFPVkQzUEU0T1kyOmJuTXlNREl4THpBM0x6QTBMek13T1RNeE56UTJNUT09",
            "Filename": "Q882106Q892EOa - IAG Bento Boxes - Perth.pdf",
            "id": "bnMyMDIxLzA3LzA0LzMwOTMxNzQ2MQ=="
        }
    ]
},
{
    "CreateDate": "2021-07-05T05:45:34Z",
    "UniqueName": "PR95291",
}

]

In the above JSON example, in the second record the "Attachments" attribute is missing.

Thanks in advance.

>Solution :

You need to correct your condition. I’m assuming your error is thrown at record.Attachments.map(e=>

 if (record.Attachments) { // If it exists then run below code block

You are using ! means it will negate the condition value, means
you were checking for if record.attachment is not present then run the code.

SOLUTION

And you cannot use if condition within JSX you need to use ternary operator condition ? true : false or && binary add operator.

{
  record.Attachments && record.Attachments.map(()=>{
      // code
    })
}

PS:
You can directly use React.Fragment as <> </>

 {data.map((record) => (
                        <tr>
                            <td>{record.UniqueName}</td>
                            <td>{record.StatusString}</td>
                            <>
                                {record.Attachments &&
                                    record.Attachments.map((line, index) => (
                                                    <>
                                                        <td>{line.uniqueAttachmentId}</td>
                                                        <td>{line.Filename}</td>
                                                        <td>{line.id}</td>
                                                    </>
                                                ))}
                            </>
                        </tr>
                     ))}