How does Array.map() works with react components?

Question

I am new to react, I am working on a school project. In it, I am using Array.map method to render my component in DOM. It's working fine but I have a little confusion with map() method on the array. When I was learning Javascript I used Array.map and I was storing a new Array from map() method into a variable. for example const newArray = Array.map(e => e*2). So from MDN documents, I know map returns a new array. So now in react I saw some example and they are not storing Array.map result in a new variable so where is this new array exist after mapping the old array, which got modified, they are just using Array.map(e => e*2) not storing returned new array in any variable? For an example below where are they storing returned new array after mapping on incompleteTodos.

So, Am I missing something here from Array.map method? P.S Below code is working fine.

const incompleteTodos = this.state.todos.filter(todo => !todo.completed);
<div className="todos">
          {incompleteTodos.length > 0 && <h2 className="incomplete">Incomplete</h2> }
          {
            incompleteTodos.map(todo => (
              <Todo key={todo.id} removeTodo={this.removeTodo} completeTodo={this.completeTodo} todo={todo}/>
            ))
          }

in JSX, you can add html element, string, and array of element or string. Here you ` incompleteTodos.map` returning array of Todo . thats why we don't need to store it in another variable — Harish
– Harish, Commented Jun 14, 2019 at 5:57
for reference check reactjs.org/docs/jsx-in-depth.html#jsx-children — Harish
– Harish, Commented Jun 14, 2019 at 5:59
Check out this one as well, reactjs.org/docs/lists-and-keys.html — Manish Khedekar
– Manish Khedekar, Commented Jun 14, 2019 at 6:00

Higanbana · Accepted Answer · 2019-11-24 09:42:54Z

2

Printing variable automatically is programmed inside render() function in JSX it works. This is the special of the ReactJS that refrained of creating too much variable for using. So if you have the code like this:

render() {
    return(
        <h1>{1+1}</h1>{// It will print '2' on the browser}
    );

}

But the way using Array.map() as a variable still decent and acceptable but the code you showed above seems better to work with react code so don't worry about that.

Happy Coding!

edited Nov 24, 2019 at 9:42

answered Jun 14, 2019 at 6:05

Higanbana

49910 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manish Khedekar · Accepted Answer · 2019-06-14 06:05:26Z

Check out the example below,

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const myTodos = [<div>Hi1</div>,<div>Hi2</div>,<div>Hi3</div>,]
// Created a array to return

class App extends Component {
  render() {
    return (
      <div className="App">
        {myTodos}
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
} 

export default App;

Here is the link for more reference, reactjs.org/docs/lists-and-keys.html

mgarcia · Accepted Answer · 2019-06-14 07:19:09Z

1

The map method is indeed returning an array of Todo components. This array is used by React to render the items.

The code you posted is equivalent to:

const incompleteTodos = this.state.todos.filter(todo => !todo.completed);
const items = incompleteTodos.map(todo => (
    <Todo key={todo.id} removeTodo={this.removeTodo} completeTodo={this.completeTodo} todo={todo} />
));

<div className="todos">
    {incompleteTodos.length > 0 && <h2 className="incomplete">Incomplete</h2> }
    {items}

answered Jun 14, 2019 at 7:19

mgarcia

6,3763 gold badges23 silver badges43 bronze badges

Collectives™ on Stack Overflow

How does Array.map() works with react components?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related