React not adding additional refs in loop

Question

refs in list component remains at 10, even when adding another item to prop in parent component. Additional added inputs when clicking the button in the list component do not get a ref assigned.

const App = () => {
  const [items, setItems] = useState(new Array(10).fill({}));
  
  return (
    <div className='App'>
      <ItemList items={items} />
      <button onClick={() => setItems([...items, {}])}>Add item</button>
    </div>
  );
}

const List = ({items}) => {
  const refs = useRef(items.map(i => React.createRef()));
  
  return (
    <div className='List'>
      {items.map(item, i) => (
        <Item ref={refs.current[i]} item={item} key={i} />
      )}
    </div>
  );
}

const Item = React.forwardRef(({item}, ref) => {
  return (
    <div className='Item'>
      <input ref={ref}/>
    </div>
  );
});

Lyes · Accepted Answer · 2020-11-20 21:01:05Z

1

Try to add the new ref using a useEffect hook inside your ItemList component

 useEffect(() => {
    refs.current.push(React.createRef())
 },[items])

edited Nov 20, 2020 at 21:01

answered Nov 20, 2020 at 20:51

Lyes

4775 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React not adding additional refs in loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related