How to pass ref to a component from a function returning jsx?

Question

React

Hello. There is code , in general, there is an App component in which there is a data state, in which the todoElems function pre-processes and returns jsx to this state, in this function on line 14 there is a ref that should refer to each checkbox and be checked in the App component for checked , after reading the documentation, I realized that refs only work in "classes", and therefore an error occurs

refInput' of undefined

how to implement it? In general, it is necessary that the ref for each input be available in the handleRemove () method, from the todoElems function and checked for checked.

Answer 1

To say that the implementation approach is bad is an understatement. Look at the code for a typical TodoApp and take a closer look at the documentation.
Apparently, they read diagonally. No ref only works in "classes".
Read about immutability and how to bind a method to a context. It's all in the documentation.
Error: says only that in your working code the method is not bound to the context. 'refInput' of undefined