DEV Community

Cover image for Floating "Undefineds" When You Just Want to Care for your Plants.
Taylor Sieling
Taylor Sieling

Posted on

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();
    }
Enter fullscreen mode Exit fullscreen mode

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()
    }
Enter fullscreen mode Exit fullscreen mode

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
    }
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
f3lix profile image
Felix • Edited

Good afternoon, if you are interested in large plant pots, then I can advise an excellent website getpotted.com, where you can find everything you need at a nice price. This is not the first year I have used this site and I can only leave a positive review. Many things related to plants at home and elsewhere, I have bought exclusively from this place. Good luck!!!