How to deal with a ref within a loop?

Question

Below is my parent component with multiple inputs from a loop. How can I choose one input to focus? Do I have to create a dynamic ref in this case?

Answer 1

if you are coming to this question 2020 here is how you create multiple refs using create hooks in a loop

   const MyComponent=(){
    // empty list to put our refs in
    let LiRefs = []

    return (
        
          

// this part i am checking if my data exist first other wise load spinner 
            {newData ? (
              newData.map((D) => {
// the cool part inside the loop 
//create new ref 
//push it into arr 

                const newRef = createRef();
                LiRefs.push(newRef);
                return (
// link it to ur li 
// voila you have list of refs that points to your list items 
                  

                    title : {D.title} 

                    description : {D.description}
                    

                    data : {D.date} 

                    price : {D.price}
                    

                    
creator : {D.creator.username}
                    {authData.token && (
                      
                        Book
                      
                    )}
                  
                );
              })
            ) : (
              
            )}
          
        
      );
 }