What is Conditional Rendering?

Conditional rendering a way to process delivering different elements and components based on certain conditions. In React, conditional rendering is the same way that conditions work in JavaScript. There are many ways to use conditional rendering. Depending on the problem you are trying to solve, some maybe more fitting than others. A few common methods are as follows:

  • if/else
  • Ternary operation
  • Inline IF with Logical && operator
  • Switch case operator

In this blog, we will be adding conditional rendering to the React App example from my previous blog, . We will be focusing on using…


What is Embedded Ruby?

Embedded Ruby a.k.a. ERB or eRuby is a template engine that embeds fragments of Ruby code into a text document. ERB is used in Ruby on Rails to show dynamic content on your website. The file extension for ERB is html.erb where you can write both HTML and Ruby code inside.

ERB tags:

In this example, we have a Blogs_controller.rb file that contains a which inherits from the and has an action. The index action has a instance variable that…


The main use for the Map method in Ruby is to efficiently transform data. The Map method can be used with Arrays, Hashes, and Ranges. Below are some examples of how to use Map.

Using Map with arrays:

Within the curly braces is our block code. |n| represents each element in the array and each element will be multiplied by four. Map will transform the original array based on this block code and return a new array. The original array, however, will not be altered. Another name for Map is Collect. …


In this blog, we are going to build a simple application in react.js that displays a search bar at the top and a list of flower names below, aka our fake data. The search bar will allow us to type into an input field that will search through our fake data and display the flower name(s) instantaneously on the screen. We will be using class based components to achieve this.

Getting started

To create a new react project, run:

Source: https://reactjs.org/docs/create-a-new-react-app.html

Remove all unnecessary files as highlighted below:

Lorraine Nabua

Flatiron Software Engineering Student

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store