---
tags: L4, David
---
# map寫JSX小技巧

重複的元素可以用array.map處理

### 原本寫法

<div className="pop-up-menu-inner">
                <div className="pop-up-menu-item"><h1>SKILL</h1></div>
                <div className="pop-up-menu-item"><h1>EXPERIENCE</h1></div>
                <div className="pop-up-menu-item"><h1>CONTACT ME</h1></div>
              </div>  

還蠻重工部份
`<div className="pop-up-menu-item"><h1>SKILL</h1></div>`

### 使用map
1. 先建立array
2. map出ＪＳＸ結構

<div className="pop-up-menu-inner">
                { NavList.map((s)=>{
                   return (<div className="pop-up-menu-item"><h1>{s}</h1></div>)
                  }
                )}
              </div>  
              

全文：

class Header extends React.Component {
 
  ... 
  
  render() {
        const popSowTag = this.state.popShow ? "pop-show" : "pop-close";
        const barCrossTag =  this.state.popShow ? "bar-cross" : "";
        const NavList = ["SKILL","EXPERIENCE","CONTACT ME"]
        return (
           ...
           
              <div className="pop-up-menu-inner">
                { NavList.map((s)=>{
                   return (<div className="pop-up-menu-item"><h1>{s}</h1></div>)
                  }
                )}
              </div>  
                 
          )