Reactの基礎3

https://qiita.com/hiro949/items/855e64ba7934d1774d91

https://qiita.com/hiro949/items/633a9086abfb1be274fe

の続きです。

# 配列に対する操作

配列のメンバ関数mapに引数として関数を与えれば、配列の各要素に対してその処理をしてくれます。

```index.js
const nums = [1,2,3,4,5];
const squares = nums.map(function(num) {
    return num*num;
});

console.log(squares);

const pokemon =  ["Bulbasaur", "Charmander", "Squirtle"];
const paragraphs = pokemon.map(mon => `<p>${mon}</p>`);

console.log(paragraphs);
```

```
[ 1, 4, 9, 16, 25 ]
[ '<p>Bulbasaur</p>', '<p>Charmander</p>', '<p>Squirtle</p>' ]
```

# htmlに対する配列

まずは次のコードを実行してブラウザで観てみます。

```index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

function App(){
    const colors = ["Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet"];
    return (
        <div>{colors}</div>
    );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
```

出力：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2445529/97207930-e3c8-eec9-6aae-58b8ff2320b4.png)

このように要素がすべてつながって出てきてしまいます。これは各要素をhtml形式にすれば無事出力されます。

```index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

function App(){
    const colors = [
        <h3>Red</h3>, 
        <h3>Orange</h3>, 
        <h3>Yellow</h3>,
        <h3>Green</h3>,
        <h3>Blue</h3>,
        <h3>Indigo</h3>,
        <h3>Violet</h3>
    ]
    return (
        <div>{colors}</div>
    );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
```

出力：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2445529/3686a779-add2-4757-4e16-89a70fad517e.png)

配列に対する処理を使って

https://qiita.com/hiro949/items/633a9086abfb1be274fe

で紹介した迷子猫の掲示板のページは次のように書き換えることができます。

まず、４匹の猫のデータのオブジェクトを要素に持つ配列を作ります。

```catData.js
const catData = [
    {
        img: "cat1.png",
        name: "Mr. Whiskerson",
        phone: "(212) 555-1234",
        email: "mr.whiskaz@catnap.meow"
    },
    {
        img: "cat2.png",
        name: "Fluffykins",
        phone: "(212) 555-2345",
        email: "fluff@me.com"

    },
    {
        img: "cat3.png",
        name: "Felix",
        phone: "(212) 555-4567",
        email: "thecat@hotmail.com"
    },
    {
        img: "cat4.png",
        name: "Pumpkin",
        phone: "(0800) CAT KING",
        email: "pumpkin@scrimba.com"
    }
]

export default catData;
```

これを読み込んでmap関数で各要素をhtml形式に変換して表示します。

```index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './style.css';
import catData from './catData';

function Contact({img,name,phone,email}) {
    const catImgPath = require(`./images/${img}`);
    const phoneIconPath = require("./images/phone-icon.png");
    const emailIconPath = require("./images/mail-icon.png");

    return (
        <div className="contact-card">
            <img src={catImgPath} alt="cat"/>
            <h3>{name}</h3>
            {phone && <div className="info-group">
                <img src={phoneIconPath} alt="icon" />
                <p>({phone}</p>
            </div>}
            {email && <div className="info-group">
                <img src={emailIconPath} alt="icon"/>
                <p>{email}</p>
            </div>}
        </div>
    );
};

function App(){
    const contactElements = catData.map(cat => {
        return Contact(cat);
    });
    return (
        <div className="contacts">
            {contactElements}
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
```

関数Appの中身がかなりスッキリしました。

<!--
https://www.figma.com/file/4YjrygFEXOcDp9AAnVFv7o/Airbnb-Experiences?node-id=0%3A1

ここの画像を使って実際にこれを真似たWebアプリを作ってみましょう。
-->