Kevin Powell - Community•14mo ago

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>
  );
}

16 Replies

ᴋʙOP•14mo ago

Is it even possible to export/import useRef() variables?

vince•14mo ago

What are you actually trying to accomplish with the useRef?

ᴋʙOP•14mo ago

i am trying to use it to scroll smoothly to a section in app.js HeaderNavigation is always visible and i have segmented all of the code into components so i need to export and import the useRef value

vince•14mo ago

Ah got it. I'll try to see if I can get that working in React. I primarily just use html/css so this would be so simple to do with that, hopefully it isn't too hard in React

ᴋʙOP•14mo ago

Yeah im new to learning react so im quite confused on how it works myself, thank you for your time, i appreciate it. And yes that is what is annoying me, this would be so simple in normal html/css

vince•14mo ago

Wait I just realized, why the hell am I or you doing this without a library? Have you looked into React Router? I believe it's pretty easy with it With React Router it's just:

<section id="about-me"/>

<Link to="#about-me" /> 

html {
    scroll-behavior: smooth;
}

<section id="about-me"/>

<Link to="#about-me" /> 

html {
    scroll-behavior: smooth;
}

ᴋʙOP•14mo ago

yeah so im confused as well, because thats literally the solution i came up with when i first tried it, but my project-leader told me that i should use useRef() instead

vince•14mo ago

I'm not a professional React dev so I could be missing something

ᴋʙOP•14mo ago

And this would work across multiple components right?

vince•14mo ago

It should yea

ᴋʙOP•14mo ago

kk imma try it out

vince•14mo ago

im trying to get it working with no library for fun rn but could take me a while i havent used react in a minute if i even figure it out lmao

ᴋʙOP•14mo ago

np lol

vince•14mo ago

I got it This is definitely not the way to go about it lol

vince•14mo ago

https://codesandbox.io/s/distracted-ptolemy-dypp26?file=/src/components/Navbar/Navbar.js

vince1444

CodeSandbox

distracted-ptolemy-dypp26 - CodeSandbox

distracted-ptolemy-dypp26 by vince1444 using loader-utils, react, react-dom, react-scripts

vince•14mo ago

What I did:

1. Make a state inside App() that holds the ref object
2. Pass the setState() function to the <About /> component
3. About component sets the App() refElement state equal to the ref object
4. The App() component gives the Navbar component the refElement state (which holds the ref object from About component)
5. The Navbar component takes the refElement's id attribute and stores it inside of its scrollToId state
6. The Navbar component sets its anchor tag's href attribute equal to the scrollToId state and adds a # to the front

1. Make a state inside App() that holds the ref object
2. Pass the setState() function to the <About /> component
3. About component sets the App() refElement state equal to the ref object
4. The App() component gives the Navbar component the refElement state (which holds the ref object from About component)
5. The Navbar component takes the refElement's id attribute and stores it inside of its scrollToId state
6. The Navbar component sets its anchor tag's href attribute equal to the scrollToId state and adds a # to the front

I think theoretically there should be a split second where the Navbar's anchor tag's href attribute defaults to just "/" but it is so fast with this application that it doesn't really mean anything

Gaming

Programming

Need help with exporting useref const.