Write logic to add a bucket list item

[djbowen95]

This is the first criteria that needs to be solved from the brief:

It's done when I write logic to add a bucket-list item in components/BucketList.js.

To do this, I need to:

• [x] Modify the bucket state object in the BucketList component so that it takes an array as a value
• [x] Write a function that adds to that list / array object stored in state
• [x] Pass that function to the BucketForm component, so that it takes in user input
• [x] Let bucket take objects that share values consistent with the input received from the form

[djbowen95]

Setup

Before I started working on this again, I found there was an issue when I cloned the repository, ran npm install, and then subsequently ran npm run start: I was presented with the following error:

 [ 'error:03000086:digital envelope routines::initialization
 error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

This is an issue from the starter code (which is several years old): I researched this online and found it is an issue to do with webpack. I decided the easiest / fastest solution would be to create a new react application and install the most recent version of the packages. With the package.json updated; React now successfully launched, and I set out to manually test the starter code and make sure there were no new errors from this approach.

The application would not immediately run - but this was because of problems in the starter code itself. This starter code was incomplete / had several components that called missing functions, and this prevented the application from launching at all. To quickly fix this / run everything present in the starter code, I commented out code importing every component which crashed the application, and reintroduced the files only when I had commented out any application breaking code.

[djbowen95]

As I needed these changes begin work, I made all of these changes on the main branch: I also carried on and resolved the present issue and the following issue, ( #5 ), on the main branch, in order to have a basic working application before adding features.

[djbowen95]

Add to a bucket list stored in state

To solve the issue itself, I first needed to create a new function, addBucketList, that would take a new bucket list item and add it to an array stored in state. To build this function, I:

• Created a state object in BucketList.js which would store an array of bucket list items: const [bucket, setBucket] = useState(["Hello", "World"]);

• Returned that state value with the component, so it would display in an h1 element: <h1>Bucket: {bucket}</h1>

• Added a html button to the component that would run/test the addBucketItem function: <button onClick={addBucketItem}>Hello</button>

• Used a spread to add a new item, a simple string, to the array stored in state. setBucket([...bucket, "Its Me"]);

Each time the button was pressed, an additional "Its Me" appeared on the page: this meant that each time my function was run, it was successfully adding an additional string value to the array stored in state.

[djbowen95]

To test this new function would continue to add changing values to the array, I created a simple helper function. This function returns a random string from an array (a new bucket list item) with six different possible values it might return.

const getNewItem = () => {
    // Array of items that could be on a bucket list.
    const items = ["Buy Things", "Do Things", "See a Dolphin", "Eat a Cake", "Go Scuba Diving", "Pay Off Mortgage"];
    // Random number to select an item from the array.
    const position = Math.floor(Math.random()*6);
    // Returns a random item to be added to the list.
    return items[position];
  } 

In the addBucketItem function, I replaced the string with a call of this function: setBucket([...bucket, getNewItem()]);

Each time the button was clicked, it would add a new value to the bucket - and these new values would display immediately on the rendered component.

[djbowen95]

Integrating with the bucket list form

I needed the state modifying function I had just built to be run when the form was submitted, so a user could add their own bucket list items. To integrate this new function with the BucketList component from the starter code, I:

• Imported the BucketForm component as a module and returned it as part of the BucketList component: import BucketForm from "./BucketForm";

• Passed addBucketList through to the BucketForm component as a props value: <BucketForm onSubmit={addBucketItem} />

• Commented out JSX elements returned in BucketForm that still required event handling functions; as these were preventing the component from running successfully while they were missing: {/* <div className="dropdown-content"> */} {/* TODO: Add an onClick event that will set the corresponding eagerness level */} {/* <p onClick={ }>Must do</p> */}

• Created a simple button to test the handleSubmit function: a function which calls addBucketItem: <button onClick={handleSubmit}>Hello</button>

• Changed the default values in the bucket state object, which had been an array of strings, to be an array of objects: as this is the data type of the output given by the handleSubmit form handling function.

• Allowed the addBucketItem function to take in an object as a parameter, so that the object created by the BucketForm / handleSubmit could be added to the array stored in state. const addBucketItem = (item) => { setBucket([...bucket, item]); };

I now considered this issue resolved: and moved to related issue #5 .