0

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}                                                        
 "
Improve this question

2 Answers 2

Reset to default
2

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
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Change to something like this ? {ProfileDetails.TransactionType && ProfileDetails.TransactionType.Name ===End" ? ... If so I am still getting TranscationType of Null
a and b are your <Button>s for each case, but I didn't see any point in including them in the answer. This is a common issue, typically solved by helper functions, like _.get(a, 'b.c.d') from lodash, which returns undefined when b or c are null or undefined. If a.b.c.d is defined, d is returned, obviously.
Right a and b are button the entire code too long to fit. My current set up is profileDetails.TransactionType && profileDetails.TransactionType.Name === "End" ? (button a) : (button b). Still getting the null property
Yes, sorry, I didn't notice your equality there. But anyways, a && b returns b if a is truthy. So the answer to your above question is: "yes". I updated the answer.
What do you mean by "Still getting the null property"? Can you show the exact error? Or provide a working codesandbox.io?
|
1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.