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