Write logic to mark a to do list item complete (and reverse that)

[djbowen95]

It's done when I write logic to mark a bucket-list item as complete or incomplete.

Also edit the BucketList.js file.

Probably the third step.

[djbowen95]

Going to edit with a detailed explanation but I:

Function that is passed through props, logs current id to console

• Created a completeBucketItem function - and had a button that would run the code on click - it logged the parameter passed through it ("hello") to the console on the browser. (first commit on August 4th)
• Passed this function through as props from BucketList to Bucket; had each bucket item (when clicked) pass the current item's id through that fucntion, and therefore log the item's id to the console (onClick as a trait[what is the right word here] on the div)

[djbowen95]

Logic to return a new array with updated values

• Used bucket.map to iterate through the every item stored in state, find the item that had a matching id, and logged this to the console; stored the found match in updatedBucket (third commit) (badly explained .map here, see below)
• Reversed the value of the '.complete' property / logged this to the console (fourth commit! important!)

[djbowen95]

Modify state, pass setBucket through props

• Gave all the values a .complete property
• Use the 'setBucket' state function to update the bucket with the updatedBucket variable; so the array now features the updated value

[djbowen95]

Update / improve styling

• Modified the styling because it was only working fi you click the text - now applies to the whole element, an a hover event (text colour and cursor type changes) to make it clear the element is selected. Could also maybe change the colour slightly...

This issue is now complete.