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.
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>