Can you use an export default function, with ReactToPrint?

Question

I am trying to implement ReactToPrint, to print out the contents of the export default function ToDoList (Which returns a map of the Todo cards from another class).

 export default function ToDoList({ todos, toggleTodo }) {
  return todos.map((todo) => {
    return <Todo key={todo.id} toggleTodo={toggleTodo} todo={todo} />;
  });
}

The ReactToPrint library seems to prefer if you use a Class Component, or a functional component like below.

export const ComponentToPrint = React.forwardRef((props, ref) => {
return (
  <div ref={ref}>
    <h2>Grocery List Contents</h2>
  </div> 
); });

What is the best way that I could use the ToDoList Default Function, with ReactToPrint?

Thank you for your time.

score 0 · Answer 1 · answered Jan 15 '22 at 23:31

I was able to figure it out. I just needed to add the desired element to a span tag, with a new ref variable slapped to it. That allowed the computer to see the component I desired.

function App() {
  const [todos, setTodos] = useState([]);
  const todoNameRef = useRef();
  const todoListRef = useRef();
);

 <span ref={todoListRef} class="containerClass">
        <ToDoList todos={todos} toggleTodo={toggleTodo}/>
        </span>

Can you use an export default function, with ReactToPrint?

1 Answers1