[React] Option에 JSON 객체를 value에 넣기 - JSON.stringify

JSON.stringify

- 드롭다운 컴포넌트에서 객체 배열을 넣으려고 한다.

- 나열하고자 하는 옵션의 리스트 요소가 객체일 경우 JSON.stringify를 사용하여 풀어 넣을 수 있다.

 

코드

import React from "react";
import styled from "styled-components";

const SelectContainer = styled.select`
  width: 120px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 10px 0 6px;
  color: #353535;
  margin: 5px 10px 0px 5px;
`;

const Option = styled.option``;

export const DropDown = () => {

  const optionList = [
    { name: "하늘", code: "0001" },
    { name: "구름", code: "00002" },
    { name: "바람", code: "00003" },
    { name: "번개", code: "00004" },
    { name: "태양", code: "00005" },
    { name: "바다", code: "00005" },
  ];

  return (
    <SelectContainer
      className="scroll"
    >
      <Option value="selectAll"></Option>
      {optionList.map(({ name, code }) => (
        <Option key={code} value={JSON.stringify({ name: name, code: code })}>
          {name}
        </Option>
      ))}
    </SelectContainer>
  );
};