ReactTag機能の実装

記事やブログの公開に主に使用されるラベル機能を実装しました.
ラベル機能の実装に慣れていないため,ベロフトの開発執筆部分を探した.

タグが存在する場合と存在しない場合を比較すると、タグを追加するたびにdivタグが生成されると判断できます.
すなわち、タグを作成した場合、タグを配列状態に含めてmapに戻すことができます.
まず、タグ全体を保存するためにtags state(array)およびtag stateを作成した.
Input Boxでは、タグをmapとして表示し、inputに必要な値を入力します.
tagに保存し、Enter(onKeyPress)を押してtagsに追加することができます.
(カンマとEnter...)
機能を実装した後,to−do−listの実装方法は非常に類似しており,原理を理解すれば容易に実装できる.
私が実装したコードは以下に添付されています.

function Tag() {
  const [tags, setTags] = useState(["javascript", "react"]);
  const [tag, setTag] = useState("");
  const removeTag = (i) => {
    const clonetags = tags.slice();
    clonetags.splice(i, 1);
    setTags(clonetags);
  };
  const addTag = (e) => {
    setTag(e.target.value);
  };
  const handleKeyPress = (e) => {
    if (e.key === "Enter") {
      handleClick();
    }
  };
  const handleClick = () => {
    setTags([...tags, tag]);
    setTag("");
  };

  return (
    <Wrapper>
      <Title>Tag</Title>
      <TagContainer>
        {tags.map((e, i) => (
          <Hash key={i}>
            <HashName>{e}</HashName>
            <HashBtn onClick={() => removeTag(i)}>x</HashBtn>
          </Hash>
        ))}

        <InputBox
          placeholder="Press enter to add tags"
          onChange={(e) => addTag(e)}
          onKeyPress={(e) => handleKeyPress(e)}
          value={tag}
        />
      </TagContainer>
    </Wrapper>
  );
}

const TagContainer = styled.div`
  display: flex;
  align-items: center;
  border: 1px solid grey;
  border-radius: 12px;
  width: 60vw;
  height: 60px;
`;
const Hash = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: ${(props) => props.theme.blue};
  border-radius: 12px;
  padding: 0 10px;
  margin: 10px;
  height: 40px;
`;
const HashName = styled.h3`
  color: ${(props) => props.theme.white.lighter};
  margin-right: 10px;
`;
const HashBtn = styled.button`
  border: none;
  outline: 0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: ${(props) => props.theme.white.lighter};
  cursor: pointer;
`;
const InputBox = styled.input`
  border: none;
  height: 30px;
  font-size: 32px;
  &:focus {
    outline: none;
  }
  @media screen and (max-width: 820px) {
    font-size: 20px;
  }
`;