How to use the scrivito.connect function in scrivito

const obj = Scrivito.currentPage();
  if (!obj.get("navigationSection")) {
    return null;
  }

  return (
    
  );
}

export default Scrivito.connect(NavigationSection);

renderChild={child => (
          
        )}
      />
    );
  }
}

export default Scrivito.connect(Nav);

function Logo({ scrolled, navigationStyle }) {
  if (!Scrivito.Obj.root()) {
    return null;
  }

  const logo = logoObj({ scrolled, navigationStyle });

  return (
    
      
    
  );
}

export default Scrivito.connect(Logo);

);
  }

  return (
    <h2>
      <i title="date" aria-hidden="true">{" "}
      <span>Valid through: </span>
      
        {formatDate(validThrough, "mm/dd/yyyy")}
      
    </i></h2><i title="date" aria-hidden="true">
  );
});

const JobEmploymentTypes = Scrivito.connect(({ employmentTypes }) =&gt; {
  if (!employmentTypes || employmentTypes.length === 0) {
    return (
      
        Select one or more employment types in the job page properties.
      
    );
  }

  const localizations = {
    FULL_TIME: "full-time",
    PART_TIME: "part-time",
    CONTRACTOR: "contractor",
    TEMPORARY: "temporary",
    INTERN: "intern",
    VOLUNTEER: "volunteer",
    PER_DIEM: "per diem",</i>

);
  }

  setTag(tag) {
    this.setState({
      currentTag: tag,
    });
  }
}

Scrivito.provideComponent("EventOverviewWidget", EventOverviewWidgetComponent);

const EventItem = Scrivito.connect(({ event }) => (
  <div>
    
      
        <span>
          {formatDate(event.get("date"), "mm/dd")}</span></div>

import InPlaceEditingPlaceholder from "../../Components/InPlaceEditingPlaceholder";
import "./LinkContainerWidget.scss";

Scrivito.provideComponent("LinkContainerWidget", ({ widget }) => (
  
    
    
  
));

const Headline = Scrivito.connect(({ widget }) => {
  const headline = widget.get("headline");

  if (!headline) {
    return (
      
        Optional: Provide a headline in the widget properties.
      
    );
  }

  return (
    <div>
      {widget.get("headline")}
    </div>
  );
});

return null;
  }

  return (
    <section>
      <div>
        <h1>
          More great blog posts from {author.get("title")}
        </h1>
        
      </div>
    </section>
  );
}

export default Scrivito.connect(BlogPostMorePosts);

classNames.push("open");
  }
  if (isActive(child)) {
    classNames.push("active");
  }

  return (
    <li>
      
        {child.get("title") || ""}
      
    </li>
  );
});

const Dropdown = Scrivito.connect(
  ({ child, open, toggleDropdown, ...otherProps }) =&gt; {
    const classNames = ["nav-item"];
    if (open) {
      classNames.push("open");
    }
    if (isActive(child)) {
      classNames.push("active");
    }

    return (
      <li>
        </li>

Provide a link in the widget properties.
        
      
    );
  }

  return (
    
      
        
      
    
  );
});

const LinkTitle = Scrivito.connect(({ link }) => {
  if (link.title()) {
    return link.title();
  }

  if (link.isInternal()) {
    return link.obj().get("title");
  }

  return link.url();
});

onClickNext={this.gotoNext}
            onClickPrev={this.gotoPrevious}
            onClickThumbnail={this.gotoImage}
            onClose={this.closeLightbox}
            showThumbnails
            backdropClosesModal
          />
        
      
    );
  }
}

Scrivito.provideComponent("ThumbnailGalleryWidget", ThumbnailGalleryComponent);

const Thumbnail = Scrivito.connect(({ widget, openLightbox, currentTag }) => {
  const title = widget.get("title");
  const subtitle = widget.get("subtitle");
  const image = widget.get("image");
  const tags = widget.get("tags");

  const classNames = [
    "col-md-3",
    "col-sm-4",
    "col-6",
    "gallery-box",
    "gutter0",
  ];
  if (currentTag && !tags.includes(currentTag)) {
    classNames.push("squeezed");
  }