ᴋʙ Posts - Answer Overflow

ᴋʙ

•Created by ᴋʙ on 10/6/2023 in #front-end

Need help with exporting useref const.

in my app() function, i have all the content for the website imported as components. And i want to modify the imported components via another component in HeaderNavigation using useRef however i cant seem to actually get the referenced element in my outside component, so i am guessing i am doing something wrong with exporting, or i have something wrong with useRef fundamentally. App.js

import "./styles.css";

import { useRef } from "react";
import HeaderNavigation from "./components/HeaderNavigation/HeaderNavigation";
import IntroSection from "./components/IntroSection/IntroSection";
import InfoSection from "./components/InfoSection/InfoSection";
import PeopleSection from "./components/PeopleSection/PeopleSection";
import CareerSection from "./components/CareerSection/CareerSection";

export default function App() {
  let OmStaeck = useRef(null);
  let Folkene = useRef(null);
  let Karriere = useRef(null);

  return (
    <div className="App">
      <HeaderNavigation />
      <IntroSection />
      <InfoSection ref={OmStaeck} />
      <PeopleSection ref={Folkene} />
      <CareerSection ref={Karriere} />
    </div>
  );
}

import "./styles.css";

import { useRef } from "react";
import HeaderNavigation from "./components/HeaderNavigation/HeaderNavigation";
import IntroSection from "./components/IntroSection/IntroSection";
import InfoSection from "./components/InfoSection/InfoSection";
import PeopleSection from "./components/PeopleSection/PeopleSection";
import CareerSection from "./components/CareerSection/CareerSection";

export default function App() {
  let OmStaeck = useRef(null);
  let Folkene = useRef(null);
  let Karriere = useRef(null);

  return (
    <div className="App">
      <HeaderNavigation />
      <IntroSection />
      <InfoSection ref={OmStaeck} />
      <PeopleSection ref={Folkene} />
      <CareerSection ref={Karriere} />
    </div>
  );
}

NavMenu.js This is the outside file that i want to import the ref's in : OmStaeck, Folkene, Karriere

import "./NavMenu-Styles.css";

import { OmStaeck, Folkene, Karriere } from "../../App";
import DefaultButton from "../Button/Default-Button";
import { ReactComponent as ArrowIcon } from "../Button-Icons/arrowIcon.svg";

function form() {
  alert("Work In Progress...");
}

export default function NavMenu() {
  function scrollTo(ref) {
    console.log(ref);
    console.log(ref.current);
    ref.current.scrollIntoView({ behavior: "smooth" });
  }
  
  return (
    <nav>
      <button
        onClick={() => {
          scrollTo(OmStaeck);
        }}
        className="nav-item remove-button-style"
      >
        Om Stækk
      </button>

      <button
        onClick={() => {
          scrollTo(Folkene);
        }}
        className="nav-item remove-button-style"
      >
        Folkene
      </button>

      <button
        onClick={() => {
          scrollTo(Karriere);
        }}
        className="nav-item remove-button-style"
      >
        Karriere
      </button>
      <DefaultButton
        label="Send åpen søknad"
        onclick={form}
        className="primary-button"
      >
        <ArrowIcon />
      </DefaultButton>
    </nav>
  );
}

import "./NavMenu-Styles.css";

import { OmStaeck, Folkene, Karriere } from "../../App";
import DefaultButton from "../Button/Default-Button";
import { ReactComponent as ArrowIcon } from "../Button-Icons/arrowIcon.svg";

function form() {
  alert("Work In Progress...");
}

export default function NavMenu() {
  function scrollTo(ref) {
    console.log(ref);
    console.log(ref.current);
    ref.current.scrollIntoView({ behavior: "smooth" });
  }
  
  return (
    <nav>
      <button
        onClick={() => {
          scrollTo(OmStaeck);
        }}
        className="nav-item remove-button-style"
      >
        Om Stækk
      </button>

      <button
        onClick={() => {
          scrollTo(Folkene);
        }}
        className="nav-item remove-button-style"
      >
        Folkene
      </button>

      <button
        onClick={() => {
          scrollTo(Karriere);
        }}
        className="nav-item remove-button-style"
      >
        Karriere
      </button>
      <DefaultButton
        label="Send åpen søknad"
        onclick={form}
        className="primary-button"
      >
        <ArrowIcon />
      </DefaultButton>
    </nav>
  );
}

26 replies

Gaming

Programming