JSFiddle - React, Tailwind, and code Playground

by Lena R

JavaScript

export default function ContentAddLink(props) {
  const [openSettingsPopupTag, setOpenSettingsPopupTag] = useState(false);
  const [opened, setOpened] = useContext(ModalContext);

  const [newLinkCard, setNewLinkCard] = useState({
    link: null,
    title: null,
    description: null,
    createdBy: null,
    tags: null,
    topic: null,
    id: null,
  });
  const formRef = useRef();

  const getLinkData = (e) => {
    setNewLinkCard({[e.target.id]: e.target.value});
  };

  const SubmitNewLink = (newLinkCard) => { 
    db.doc(`/projects/${projectId}`).collection("links").add(
      {
        link,
        title,
        description,
        createdBy,
        tags,
        topic,
        id
      } = newLinkCard.data()
    )
.then(function(NewLinkCard) {
    console.log("Link Card added with ID: ", newLinkCard.id);
})
.catch(function(error) {
    console.error("Error adding Link Card: ", error);
});
}; 

  return (
    <Wrapper>
      <CloseButton onClick={() => setOpened(!opened)}>X</CloseButton>
      <SecondHeading>add new link</SecondHeading>
      <Form onSubmit={SubmitNewLink()} ref={formRef}>
        <FieldWrapper>
          <label htmlFor="text">link name</label>
          <br />
          <Input type="text" id = "name" />
        </FieldWrapper>
        <FieldWrapper>
          <label htmlFor="text">link url</label>
          <br />
          <Input type="text" id = "url" />
        </FieldWrapper>
        <FieldWrapper>
          <label htmlFor="text">add tag</label>
          <br />
          <Input type="text" id = "tag"/>
        </FieldWrapper>
        <br />
        <label htmlFor="checkbox">add more tags</label>
        <FiltersWrapper>
          <FilterButton
            onClick={() => setOpenSettingsPopupTag(!openSettingsPopupTag)}>
            check from the list
          </FilterButton>
          <CheckboxsWrapperTag openSettingsPopupTag={openSettingsPopupTag}>
            <Checkbox name="tag 1" type="checkbox" id = "listtag"/>
           ...