CODEWITHSUNDEEP
javascriptarraysreactjsmapping
neoslo
neoslo

Reputation: 423

Cannot ready property of null - Ternary operator on an array of objects

I am currently mapping an array of objects called ProfileDetails in a table. At the bottom of the table, I have a button where you can decide to accept these details. I am attempting to do a ternary operator to have the button disabled unless ProfileDetails has a TransacationType End. TransactionType.Name === "End". I am getting TransactionType is null. Some users may have more or less than the 4 objects in an array.

Here is what I've tried:

           <Grid item xs={2}>
                    <Grid
                        container
                        justify="center">
                        <Grid item>
                           {ProfileDetails
                                .TransactionType
                                .Name ===
                            "End" ? ( 
                            <Button
                                variant="contained"
                                color="primary"
                                onClick={
                                    handleApprove
                                }>
                                Approve
                            </Button>
                            ) : ( 
                            <Button
                                variant="contained"
                                color="primary"
                                disabled>
                                Approve
                            </Button> 
                             )} 
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>

Example of one of the arrays:

(4) [{…}, {…}, {…}]
0: {ProfileID: 476, Location: Home,  TransactionType: {Name: "LogIn", ShortName: null, ID: 1}
1: {ProfileID: 476, Location: Home,  TransactionType: {Name: "LogOut", ShortName: null, ID: 1} 
2: {ProfileID: 476, Location: Home,  TransactionType: {Name: "Break", ShortName: null, ID: 1}
3: {ProfileID: 476, Location: Home,  TransactionType: {Name: "End", ShortName: null, ID: 1}                                                        
 "

Upvotes: 0

Views: 115

Answers (2)

lawrence-witt
lawrence-witt

Reputation: 9354

You are never specifiying which element in the array you are trying to read the property TransactionType for. You would need to target something like ProfileDetails[0].TransactionType.Name or map through every object in the array like:

{ProfileDetails.map(profile => {
    profile.TransactionType.Name === "End" ?
    (<Grid item>
        <Button enabled>
    </Grid>) :
    (<Grid item> 
        <Button disabled>
    </Grid>)
})}

Reading over your question and comments again, it seems like what you actually want to do is display the enabled button if one of the objects in the array has the "End" property, and otherwise display the disabled button. In which case, you could just switch out the .map for .some. You might have to return the grid item in each case to make it work.

Upvotes: 1

tao
tao

Reputation: 90068

If ProfileDetails is an item in your array, change 

ProfileDetails.TransactionType.Name === 'End' ? a : b

to

ProfileDetails.TransactionType
  && ProfileDetails.TransactionType.Name === 'End' ? a : b

If ProfileDetails is the array and you want to display a when your array contains an End TransactionType (and b otherwise), map the transaction type names and check if it includes 'End':

ProfileDetails.map(p => p.TransactionType.Name).includes('End') ? a : b

Upvotes: 2

Related Questions