Floating "Undefineds" When You Just Want to Care for your Plants.

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.

Blog

Floating "Undefineds" When You Just Want to Care for your Plants.

Taylor Sieling

Ah, Javascript.

Join Our Newsletter. No Spam, Only the good stuff.

Related