React/Typescript. Passing numeric ref down to component

Viewed 20

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>
  );
});
0 Answers
Related