CODEWITHSUNDEEP
javascriptreactjsreact-hooksrefuse-ref
Jean Pierre
Jean Pierre

Reputation: 321

UseRef to select the parent component of the actual one

I'm using useRef to select a component and print it.

Here is the component:

import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';

const Details = ({ view }) => {
  const componentRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => componentRef.current
  });

  return (
    <div className="order-details-section" ref={componentRef}>
      <div className="return-an-issue-header">
        <div className="return-an-issue-title"></div>
        {view && (
          <div className="print-items-container">
            <p onClick={handlePrint}>click to print</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default Details;

It works fine but only for the current component which is a part from the whole page. I would like to print the parent component, or to pass it by the className.

Is it possible to do something like that? To get the parent component in useRef or to select it by class?

Upvotes: 0

Views: 4362

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 282050

You can move the useReactToPrint to the parent and pass on the handlePrint function as props to the child component if you want to access a ref of the parent and print it

const Details = ({ view, handlePrint}) => {

  return (
    <div className="order-details-section">
      <div className="return-an-issue-header">
        <div className="return-an-issue-title"></div>
        {view && (
          <div className="print-items-container">
            <p onClick={handlePrint}>click to print</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default Details;

const Parent = () => {

  const componentRef = useRef();
  const handlePrint = useReactToPrint({
      content: () => componentRef.current
  });
  return (
      <div ref ={componentRef}> 
         <div>Some other content</div>
         <Details view={...} handlePrint={handlePrint}/>
     </div>
  )
}

Upvotes: 1

Someone Special
Someone Special

Reputation: 13598

You can pass the ref to the child component like how you normally pass props to child component.

Do note: Ref does not trigger rerendering, so when the input value changes, you need to click the button to get the new value.

This is just a code example to demostrate passing of ref to child component.

Codesandbox

import { useRef, useState } from "react";
export default function App() {
  const inputRef = useRef();
  return (
    <div className="App">
      <input ref={inputRef} />
      <ChildComponent parentRef={inputRef} />
    </div>
  );
}

const ChildComponent = ({ parentRef }) => {
  console.log("parentRef", parentRef);

  const [value, setValue] = useState("");
  const getValue = () => {
    setValue(parentRef.current.value);
  };
  return (
    <>
      <h1>Child Component</h1>
      {value}
      <button onClick={getValue}>Get Value</button>
    </>
  );
};

Upvotes: 1

Related Questions