{"id":2775,"date":"2018-11-07T12:01:15","date_gmt":"2018-11-07T12:01:15","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=2775"},"modified":"2018-11-07T12:01:15","modified_gmt":"2018-11-07T12:01:15","slug":"working-with-functions-and-array-map-method-in-reactjs","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/working-with-functions-and-array-map-method-in-reactjs\/","title":{"rendered":"Working with Functions and Array.Map() Method in ReactJS"},"content":{"rendered":"

Note<\/strong>: This is part 1 of three-part prerequisite post series. A\u00a0 prior knowledge of these topics is essential before deep diving into Creating List React component<\/em>.<\/p>\n

In the previous learning-note post\u00a0Learning to Work With React Components<\/a>, how to build a simple react component using run time <script><\/code>in a HTML file were discussed. Although slow, this approach is not ideal for react app development, however it is ideal for my current learning purposes.<\/p>\n

The purpose of this learning-note post series is to understand how a simple list react component is created and apply that knowledge to build BlogPost<\/code> component to list posts in a page.<\/p>\n

JavaScript Prerequisite<\/h5>\n

Because creating List component ReactJS<\/a> is advanced topic, it requires working JS knowledge in the following areas:<\/p>\n

Post Series<\/strong>
\nPart 1<\/strong>: JavaScript Fundamentals – Array.Map(), Arrow Functions & Functions (this post<\/strong>)
\nPart 2: How to Pass Props (Data Objects) to Component in ReactJS<\/a>
\nPart 3: Creating List Component in ReactJS<\/a><\/div>\n

The objective of this learning-post to review JavaScript (JS) fundamentals, for example functions<\/em>, array function<\/em>, map()<\/code> & array.map()<\/code> methods to apply in creating a List react component.<\/p>\n

Arrow Functions in React Component<\/h4>\n

Arrow functions<\/a> are discussed in detail in another post understanding JavaScript arrow function<\/a>. Revisiting basic arrow function syntax:<\/p>\n

\/\/arrow function syntax\n    () => { ... } \/\/ with no parameter\n     x => { ... } \/\/ with one parameter\n(x, y) => { ... } \/\/ with several parameters<\/code><\/pre>\n
Arrow function<\/a> syntax is commonly used in react functional (stateless) components<\/a> because of its concise code. Some use case examples of arrow functions in react is shown below.<\/p>\n
\/\/syntax - with no argument\n() => { statements }\n\n\/\/ES5 syntax\nlet myComp = function jsLearn() {\n    return 'Welcome to ReactJs';\n    };\n\n\/\/ES6 syntax\nlet myComp = () => { return 'Welcome to ReactJs' };<\/code><\/pre>\n
In the example above, a very basic react functional component myComp<\/code> with ES5 syntax (lines:\u00a0 5-7) can be written in a single line (line 10) with ES6 arrow function syntax. It is concise and easy to read too.<\/p>\n
\/\/ ES5 function syntax\nfunction helloWorld() {\n    return 'Hello World! Welcome to reactJs';\n  }\n  \n  \/\/ ES6 arrow function syntax with return\n  const HelloWorld = () => {\n    return 'Hello World! Welcome to reactJs';\n  }\n  \n  \/\/ ES6 arrow function without return\n  const HelloWorld = () =>\n    'Hello World! Welcome to reactJs';<\/code><\/pre>\n
In the example above, a use case example of a basic react functional component helloWorld<\/code> with ES5 syntax (lines: 2-4) is written with ES6 arrow function with use return<\/code> keyword (lines: 7-9) and without return<\/code> keyword (lines: 12-13) is shown.<\/p>\n
Functions as React Component<\/a><\/h6>\n
React component can be written with a simple JS functions as functional components. Functional (stateless) component<\/a> was briefly discussed in a previous post. Functional component do not manage state (stateless<\/strong><\/em>) and are not aware of its own state<\/a>. Their main purpose is \u201cpresentational<\/em>\u201d i.e. to to receive data and present as JSX. It requires rendering mechanism<\/a> render()<\/code> method from React component.<\/p>\n
\/\/functional component\nfunction Greeting(props) {\n  return <h1>Hello, {props.name}<\/h1>;\n}<\/code><\/pre>\n
In the example above, the Greeting<\/code> component receives a single props<\/em> (which is short for properties<\/em>) object argument with data and return a react element. Functional components are easy to write and preferred method of creating react components when no state or methods (class or lifecycle<\/a>) is not required.<\/p>\n
The examples used in arrow functions in previous section can be written as functional (stateless) components as shown below:<\/p>\n
\/\/ JavaScript ES5 function\nfunction Hello(props) {\n  return <h1>{props.name}<\/h1>;\n}\n\/\/ JavaScript ES6 arrow function\nconst Hello = (props) => {\n  return <h1>{props.name}<\/h1>;\n}\n\/\/ JavaScript ES6 arrow function without body and implicit return\nconst Hello = (props) =>\n  <h1>{props.name}<\/h1><\/code><\/pre>\n
In the example above, arrow functions were used to write simple functional component. Because of their simple syntax and easy to read, most functional components are written using arrow functions.<\/p>\n
This section of the post is inspired by Robin Wieruch<\/a>\u2019s JavaScript fundamentals before learning React<\/a> post.<\/p>\n
Revisiting map() and Array.map() Methods<\/h4>\n
In previous post on JavaScript Arrow Functions<\/a>, use case example of array.mapping<\/a> was discussed briefly. In this section we will deep dive into\u00a0 its basic syntax, how it it applied in ReactJS.<\/p>\n
Prerequisites<\/h6>\n
An understanding of following topics is essential before starting jumping into List react component. The purpose of this post is to revisit the following topics discussed in previous posts<\/a> and assemble relevant use case examples of iterating objects, arrays \u2026.<\/p>\n