[筆記] React 隨手記（React 應用篇.map）

在畫面上條列是渲染 => .map
例1:
pokemon lottery
先 set 好 prizes 想傳入的值（圖一）
（圖一）每個獎項的資料

const prizeArray = [
  {
    id: 1,
    picture: 1,
    left: 133,
    top: -177,
    zindex: '0',
    width: 129,
    height: 123,
    opacity: 0.4,
    medal: null,
    percent: 21,
  },
  {
    id: 2,
    picture: 2,
    left: 276,
    top: -72,
    zindex: '2',
    width: 138,
    height: 124,
    opacity: 0.6,
    medal: null,
    percent: 21,
  },
  {
    id: 3,
    picture: 3,
    left: 445.5,
    top: -13,
    zindex: '3',
    width: 143,
    height: 139,
    opacity: 0.8,
    medal: null,
    percent: 21,
  },
];
export default prizeArray;

（圖二）引入獎項資料

export default function Carousel() {
  const [prizes, setPrizes] = useState(prizeArray);

  //useEffect(() => {
    console.log(prizes);
  }, [prizes]);
  //寫完 code 利用測試獎項資料有沒有引入成功
  return (
    <>
      <CarouselContainer>
 //在父曾標籤下，return 子層標籤 ,並把 prizes 設定的資料引入
        <CarouselItems>//父層標籤
          {prizes.map((prize) => {
            return (
              <CarouselItem
              //子層標籤
                key={prize.id}
                picture={prize.picture}
                left={prize.left}
                top={prize.top}
                zindex={prize.zindex}
                width={prize.width}
                height={prize.height}
                opacity={prize.opacity}
                medal={prize.medal}
                percent={prize.percent}
              />
            );
          })}
        </CarouselItems>
      </CarouselContainer>
    </>
  );
}

其中下方標籤關係等於 ul, li 的意思

<CarouselItems>
    <CarouselItem/>

例2:
pokemon lottery
先 set 好 todos 想傳入的值（圖一）

function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      content: 'new todo',
      isDone: false,
    },
  ]);

（圖二）引入todo資料

<ul className='p-0'>
{todos.map((todo) => {
    return (
      <TodoItem
        id={todo.id}
        key={todo.id}
        content={todo.content}
        isDone={todo.isDone}
        handleChangeStatus={handleChangeStatus}
        handleDelete={handleDelete}
      />
    );
    })}
</ul>
</>
);
}

其中下方標籤關係等於 ul, li 的意思