Floating "Undefineds" When You Just Want to Care for your Plants.
Tags: javascript, student, flatiron, rubyapi
Published: 2021-04-14 02:04:04

####Ah, Javascript. 
I had been looking forward to learning Javascript since the very beginning of my Flatiron School journey. Going into Software Engineering, I knew that I liked frontend development and I was ready dive in. 

The learning curve was very steep. Switching from Ruby brain to Javascript brain was not an easy transition for me. Although I kept up with the lessons and labs throughout the module, I didn't really start to put all the pieces together until I started on my project. The whole time, I just wanted to add my plants, and track their care, and make it all look pretty. But, I kept getting stuck on return values.

While coding out the plant "show" view of my application, I noticed a floating "undefined" at the bottom of the page. It wasn't coded in the HTML and I spent hours trying to make it go away. Turns out it was from my `plantShowRender()` function. 

```
    plantShowRender() {
        this.plantIndex.style.display = 'none';
        this.plantShow.style.display = 'block';
        this.plantShow.innerHTML = `
            <div class="section" id="top-button">
                <button id="back-to-index" class="button">Back to All Plants</button>
            </div>
            
            <div class="plant-row" id="plant-info-row">
                <div class="plant-col" id="plant-${this.id}-image">
                    <img class="displayimg" src="${this.image_url}" alt="${this.species}" width="100%">  
                </div>
                <div class="plant-col" id="plant-${this.id}-care-info">
                    <h2>${this.nickname}</h2>
                    <h3>${this.species}</h3>
                    <p>${this.description}</p>
                    <p><strong>Current Planter:</strong> ${this.pot}</p>
                    <div id="plant-edit-buttons">
                        <button class="update button" data-id="${this.id}">Update</button> 
                        <button class="delete button" data-id="${this.id}">Delete</button>
                    </div>
                </div>
            </div>
            <div class="section" id="plant-care-row">
                <div class="section" id="care-button-container">
                    <button id="care-button" class="give-care button" data-id="${this.id}">Give Plant Care</button>
                </div>
                <div class="care-title">
                    <h2>Plant Care History</h2>
                </div>
            </div>`
       
        this.addPlantCares();
    }
```

Above was my original code. 

As I have learned, the value of your return will replace the function call. When I called `plantsShowRender()`, the return value was "undefined". 

```
 viewPlantInfo = (e) => {
        const plant = Plant.all.find(p => p.id == e.target.dataset.id)
        this.plantShow.append(plant.plantShowRender())
        this.addButtonListeners()
    }
```
Thus, the little floating "undefined" at the bottom of the page. 

I updated my code to add a return statement to `plantShowRender()`, as seen here:

```
    plantShowRender() {
        this.plantIndex.style.display = 'none';
        this.plantShow.style.display = 'block';
        this.showElement.innerHTML = `
            <div class="section" id="top-button">
                <button id="back-to-index" class="button">Back to All Plants</button>
            </div>
                <div class="care-title">
                    <h2>Plant Care History</h2>
                </div>
            </div>`;

        return this.showElement
    }
```

Then, I called the function on `this` - the plant instance in this case - and called `this.addPlantCares` in the `viewPlantInfo()` function.

Return values certainly aren't thing only thing that I struggled with in this project, but the more I messed up, the more I learned. In the end, I am really proud of what I created and look forward to working on more frontend projects.