useRef ref.current is undefined passed as prop and through context

September 14, 2022

Trying to pass a ref from one component to another and only trying to console log the ref.current property and it constantly comes up as undefined. I have tried this question’s solution and it is still undefined.

I only want to update the class of an element in the Header component once an event is triggered in the SearchBar component. So I am passing the ref down to SearchBar

The Header is where the ref is coming from and is being passed to the SearchBar component.

I have tried to pass it as a prop from the Header to the SearchBar and now I am trying to pass it through state containing the ref. I have console logged the logo.current through the passed prop and through the state.current property and both come back undefined.

import React, { useContext, useEffect, useRef } from "react";
import SearchContext from "../contexts/SearchStore";
import SearchBar from "./SearchBar";

const Header = () => {
  const { setRefState, refState } = useContext(SearchContext);
  const logo = useRef();

  useEffect(() => {
    setRefState(logo.current);
  }, [logo.current])

  return (
    <section id="headerContainer" className="d-grid">
      <h2
        ref={logo}
        className="ui header d-flex align-items-center justify-content-center mb-0 headerLogo"
      >
        <div className="content headerFont fs-3 ps-0">WhatSong.</div>
        <i className="play circle icon fs-5"></i>
      </h2>
      <div id="header2" className="d-flex align-items-center flex-row-reverse">
        <SearchBar logo={logo} />
      </div>
    </section>
  );
};

export default Header;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React, { useEffect, useContext } from "react";
import SearchContext from "../contexts/SearchStore";
import "../styles/body.css";

const SearchBar = (logo) => {
  const {
    term,
    setTerm,
    submittedTerm,
    setSubmittedTerm,
    refState,
  } = useContext(SearchContext);

  const styleLogo = () => {
    console.log(refState.current);
    console.log(logo.current)
  };
  
    return (
    <div id="searchContainer" className="w-50 d-flex justify-content-end">
      <form
        onSubmit={(e) => {
          e.preventDefault();
          setSubmittedTerm(term);
        }}
        className="ui left icon input w-50"
      >
        <i className="inverted circular search link icon"></i>
        <input
          value={term}
          type="text"
          placeholder="Search..."
          data-dashlane-rid="3640789f2356683f"
          data-form-type=""
          className="searchInput"
          onChange={({ target }) => setTerm(target.value)}
          onMouseEnter={styleLogo}
          onMouseLeave={styleLogo}
          onFocus={styleLogo}
          onBlur={styleLogo}
        />
      </form>
    </div>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

>Solution :

You need to recieve logo correctly:

const SearchBar = ({logo}) => {
  const {
    term,
    setTerm,
    submittedTerm,
    setSubmittedTerm,
    refState,
  } = useContext(SearchContext);

  const styleLogo = () => {
    console.log(refState.current);
    console.log(logo.current)
  };
  
    return (
    <div id="searchContainer" className="w-50 d-flex justify-content-end">
      <form
        onSubmit={(e) => {
          e.preventDefault();
          setSubmittedTerm(term);
        }}
        className="ui left icon input w-50"
      >
        <i className="inverted circular search link icon"></i>
        <input
          value={term}
          type="text"
          placeholder="Search..."
          data-dashlane-rid="3640789f2356683f"
          data-form-type=""
          className="searchInput"
          onChange={({ target }) => setTerm(target.value)}
          onMouseEnter={styleLogo}
          onMouseLeave={styleLogo}
          onFocus={styleLogo}
          onBlur={styleLogo}
        />
      </form>
    </div>
  );
};