React/Typescript. Passing numeric ref down to component

Question

I have the following component

function App() {

  const inputCounter = useRef(0)

  return (
    <div className="min-h-screen bg-blue-700 px-8 py-56">
      <div className="m-auto text-center text-white max-w-6xl">
        {"s oifjs oifj seofjsefiosjefois seiofj sef sjoefosefs eoijfs"
          .split(" ")
          .map((w,i) => {
            return <Input ref={inputCounter} inputNumber={i} key={uuidv4()} word={w} />;
          })}
      </div>
    </div>
  );
}

I'm passing the inputCounter ref to the <Input/> component, but this is resulting in the error

Type '{ ref: MutableRefObject<number>; inputNumber: number; key: string; word: string; }' is not assignable to type 'IntrinsicAttributes & IInputProps & { children?: ReactNode; }'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & IInputProps & { children?: ReactNode; }'.ts(2322)

Can anyone explain this to me?

const Input: React.FunctionComponent<IInputProps> = React.forwardRef(({word,inputNumber},inputCounter) => {
  
  const [revealedChars,setRevealedChars] = useState<string[]>([])
  const [inputs,setInputs] = useState<string[]>([])

  useEffect(() => {
    const underscores = "_".repeat(word.length)
    const asArr = underscores.split("");
    const randIdx = randomIntFromInterval(0,word.length-1)
    asArr[randIdx] = word[randIdx]
    const finalWord = asArr.join("");
    const chars = finalWord.split(/_+/g)
    const theInputs = finalWord.split(/[^_]+/g)
    
    setInputs(theInputs)
    setRevealedChars(chars)

    


  },[])

  const content : JSX.Element[] = [];

  for (let i = 0; i < Math.max(inputs.length,revealedChars.length); i++) {
    if(revealedChars[i]) {content.push(<span key={uuidv4()}>{revealedChars[i]}</span>)}
    if(inputs[i]) {content.push(<Inputt containerNumber={inputNumber} inputnumber={i} key={uuidv4()} width={inputs[i].length}/>)}
    
  }

  

  return (
    <div className="inline-block flex-col px-5 py-4 rounded-2xl justify-center space-y-4">
        <div className="flex justify-center text-4xl font-mono input-container">
          {content}
        </div>
        <button tabIndex={-1} className="text-xs px-4 py-2 opacity-50 hover:opacity-100">show letter</button>
    </div>
  );
});

How could this ref be a number when you assign a html element into it? — Konrad, Sep 24 '22 at 19:06
Does this answer your question? [How can I use multiple refs for an array of elements with hooks?](https://stackoverflow.com/questions/54633690/how-can-i-use-multiple-refs-for-an-array-of-elements-with-hooks) — Konrad, Sep 24 '22 at 19:07
@KonradLinkowski I wanted to pass this numeric ref with `forwardRef` to the Input component. But maybe I've misunderstood something, and this isn't possible at all? — Boris Grunwald, Sep 24 '22 at 19:08
`forwardRef` works the other way around. You just wanted to use a prop named `ref` — Konrad, Sep 24 '22 at 19:13
ref should be attached to a DOM element not to the component iirc ... else it just becomes a `prop` to the component as any other prop — KcH, Sep 24 '22 at 19:14
Does this answer your question? [ref is null Typescript + NextJS](https://stackoverflow.com/questions/70365165/ref-is-null-typescript-nextjs) — jsejcksn, Sep 24 '22 at 20:10

React/Typescript. Passing numeric ref down to component

0 Answers0