React Components and Props

Vignesh S
Vignesh S
May 5 · 4 min read
Table of Contents

The component provides the solution for front-end complexity. It's just breaking the large pieces of complex UI parts into smaller pieces. So the component can be working independently and easily reusable.

The React component can write it in two ways, Class Component & Functional Components.

Before going to a detailed view about components, if you don’t have an idea about class. Please refer ES6 Class feature in our story and then continue.

Class Component

A class component requires you to extend from React. Component. The render() method must define in your subclass if the parent is React. Component. Let’s see the simple example for a class.

Class Component

When to use and why?

Class Components are Stateful components because they implement logic and state in it. React Lifecycle methods can be used inside class components. In our later stories, we will see the detailed view of React Lifecycle methods.

Functional Component

A Functional component is similar to a JavaScript function that returns a React element. An object props as an argument is available, but it is not mandatory.

Functional Component

When to use and why?

Functional Components are Stateless components because they just accept the data and display it. Mainly it is used only for rendering UI. Lifecycle methods can not be used inside functional components.

Component using another Component Code Pen

Functional Component using another Functional Component

Incase If you are going to use the component from other files or folder, then import the corresponding component to be here. eg) If there is a footer content which is available in /footer/Footer.js. Just import and use it.
import footer from ‘./footer/Footer.js’;

Class Component using another Code Pen

Class Component using another Class Component

Understanding of props & default props Code Pen

props stand for properties and are being used for passing data from one component to another. Suppose if the props not passing the data from the parent component to the child, then the default props will provide the data. Let’s see this scenario with an example.

Understanding of Props

Will the <Employee /> return undefined or blank with No attributes?

Yes only if we are not set the default props. But in this code, we set default attribute values for “name” as ‘Morgan’ and “country” as “Ireland” in the Employee component. So the logical operator || used to set a fallback value, so whenever a prop is missing it displays the fallback value in place of the missing prop.

Looping an array in JSX Code Pen

In the last example, we manually called the employee component three times, suppose if the number of calls increased in such cases, use loop to avoid the component calls one by one.

Looping an array in JSX

Here we used the map method to return the values, why not used the forEach method? Code Pen

Let’s see the difference between forEach vs filter vs map vs reduce methods.

forEach vs filter vs map vs reduce

Hope it will give a basic view of Component & Props, Looping an array in JSX & Array iteration methods. Please write your questions for any doubts or corrections.

Let’s discuss the next feature of ReactJS in the next story.
Next topic: State in React

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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