ES6 Map Method

ES6 introduces a new array method called map, using which we can apply a function on every element of an array. This is useful in React because, using a map, we can generate lists and repeated elements with a minimal amount of code.

The map iterates over the entire array, passing the elements one by one as an argument into the inline function and storing the return values of the inline function into an output array.

We can use the same logic combined with JSX and React to achieve amazing results. We will explore JSX in detail in later chapters.

Example

There is a popular coding problem called the ‘FizzBuzz’ problem. The user is given an array of integers and asked to go through the array and:

Replace the element with "FizzBuzz" if it's divisible by 3 and 5;
Replace the element with "Fizz" if it's divisible by 3;
Replace the element with "Buzz" if it's divisible by 5;
Leave the integer as it is if it's divisible by none.

Everything was clear?

Section 1. Chapter 5

Course Content

Introduction to React

1. Getting Started: ES6

Why React?Node.js and npm ES6 Variables ES6 Arrow Functions ES6 Map Method ES6 Destructuring ES6 Spread Operator ES6 Ternary Operator

2. Getting Started: JSX

JSX Introduction JSX Variables & Nested Elements JSX Embedding Expressions JSX Specifying Attributes Getting Started with React

3. React in Practice

Getting familiar with JSX Writing more Complex Elements using JSX Creating a React-Based Project Structure of a React Project

4. React Components

Introduction to Components Functional Components Creating React Components Importing Components

5. Controlling Data & Content

Passing Data into Components Conditional Rendering Loop Based Rendering Keys in Lists Event Handling Creating a TODO Application

6. Hooks

Introduction to Hooks Using the State Hook The Effect Hook Rules of Using Hooks Creating Custom Hooks Fixing the Todo Application

7. React Router

Introduction to React Router Route-Based Rendering Creating Navigation Bars Using Params