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.

Comments

[Felix]

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!!!