I want to use a ref for my elements, but I get an error and I don't know how to fix it.

Type '{ ref: RefObject<unknown>; letter: string; draggable: number; }' is not assignable to type 'IntrinsicAttributes & content'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & content'. 

I've searched online for a while, but I can't find anything helpful to my case.

Here's my code:

Content.tsx
import React, { useRef, useState } from 'react';
import { Box } from './Box';

function Content() {
    const onSubmitAnswer = () => {
        console.log("da");
    };

    const test = React.createRef();
    
    return (
        <div>
            <Box {...{ letter: 'C', draggable: 1 }} ref={test}/>
            <Box {...{ letter: 'A', draggable: 0 }} />
            <Box {...{ letter: 'B', draggable: 0 }} />
            <Box {...{ letter: 'C', draggable: 0 }} />
            <Box {...{ letter: 'D', draggable: 0 }} />
            <button onClick={onSubmitAnswer}>Trimite!</button>
        </div>
    );
}

export default Content;

and Box.tsx

import React from 'react';
import './Box.css';
import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';

export type content = {
    letter: string,
    draggable: number
}



export function Box(props: content) {
    const el = React.createRef();

    if(props.draggable) {
        return (
            <Draggable>
            <div className="box box-drag">
                <span className="box-content">
                  {props.letter}
                </span>
              </div>
            </Draggable>
            );
    }
    return (
        <div className="box">
            <span className="box-content" ref={el => {console.log(el?.getBoundingClientRect());}}>
              {props.letter}
            </span>
          </div>
        );
}

I think I know why this happens - Box is a ponent, and when I pass ref as an attribute (like I would do with a JSX tag) it doesn't behave the same (it goes in the props).

Is there any way to use ref/className/name on a ponent just as I'd use them on a JSX element?

//edit: typescript playground link:

;ssc=1&pln=1&pc=7#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDecCuAzksgGbZFIDKMKMScAvnKVBCHAORSoacDcAKFCRYXAHQB6AEIQAHuLSFCA4eGjwAIlBQBzXSgBGAGyTY82vQZNJNdFNkv6jpgKIA3JADt4zVuy4edBgAWgATHWcbVUEYAE8wBjQIH294AF5cQTgcuFMYeigALjhCGChgL11MbNyIqxckEq98EEMkKEFGQUFSfC8MYBS4WTkACjA2MEIS5NSfAEos3LhgUgmpwnF6qNMlnFqVnJ4YfCgvODHDo5WAHidrUwA+a5uc27Dgdzg0YxRlAByKBASHSACJDPI4JC5OFImCXm8kXBboQwCgLr9-oQgSDwTCQnN6D4Ea9kSscJMINNxPlCt1yTdbpI0RjEYz3pJPu52eTmQ9GrzkQshCsGbkTmcLlckR8vj8-oDgaCIfJSRzUejMYqccr8fJCSliTB1RzcFSaXSOuK+SytUKmVyvg7ciKuj0+gMYEMLgBhI1pMb7a5zMpwFJUfCGEDAGAAQS8hAA7h04Jkg2mnss3qGIKZaRBdGMwWEUGC3WKhCGUmH6GHMshgoogvQyLcMXEnkHRblrpLzpcye9uS6maNcOJJ3grcUuL7ONgdo8mnAAIxMZg8UjpHB1mDMSSjo63cc4SfiadIAodEqcOMLuBLxolAAMG7gh6Hx9P58v19nnDSA+T42K+76fhqP5TnkV6FLe86LpEy5gYwB5HncUEXjB-63powFIc+cBvqhH7obktyGPgBTDCkvrGMAaAANY7hGUYxvGiYplAjBPAAKhU7FIAAhMylHUV4R7MiO1xut0ghIHIojwGESCkCg+DGPA-rzDA-BAA

I want to use a ref for my elements, but I get an error and I don't know how to fix it.

Type '{ ref: RefObject<unknown>; letter: string; draggable: number; }' is not assignable to type 'IntrinsicAttributes & content'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & content'. 

I've searched online for a while, but I can't find anything helpful to my case.

Here's my code:

Content.tsx
import React, { useRef, useState } from 'react';
import { Box } from './Box';

function Content() {
    const onSubmitAnswer = () => {
        console.log("da");
    };

    const test = React.createRef();
    
    return (
        <div>
            <Box {...{ letter: 'C', draggable: 1 }} ref={test}/>
            <Box {...{ letter: 'A', draggable: 0 }} />
            <Box {...{ letter: 'B', draggable: 0 }} />
            <Box {...{ letter: 'C', draggable: 0 }} />
            <Box {...{ letter: 'D', draggable: 0 }} />
            <button onClick={onSubmitAnswer}>Trimite!</button>
        </div>
    );
}

export default Content;

and Box.tsx

import React from 'react';
import './Box.css';
import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';

export type content = {
    letter: string,
    draggable: number
}



export function Box(props: content) {
    const el = React.createRef();

    if(props.draggable) {
        return (
            <Draggable>
            <div className="box box-drag">
                <span className="box-content">
                  {props.letter}
                </span>
              </div>
            </Draggable>
            );
    }
    return (
        <div className="box">
            <span className="box-content" ref={el => {console.log(el?.getBoundingClientRect());}}>
              {props.letter}
            </span>
          </div>
        );
}

I think I know why this happens - Box is a ponent, and when I pass ref as an attribute (like I would do with a JSX tag) it doesn't behave the same (it goes in the props).

Is there any way to use ref/className/name on a ponent just as I'd use them on a JSX element?

//edit: typescript playground link:

https://www.typescriptlang/play?ssl=1&ssc=1&pln=1&pc=7#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDecCuAzksgGbZFIDKMKMScAvnKVBCHAORSoacDcAKFCRYXAHQB6AEIQAHuLSFCA4eGjwAIlBQBzXSgBGAGyTY82vQZNJNdFNkv6jpgKIA3JADt4zVuy4edBgAWgATHWcbVUEYAE8wBjQIH294AF5cQTgcuFMYeigALjhCGChgL11MbNyIqxckEq98EEMkKEFGQUFSfC8MYBS4WTkACjA2MEIS5NSfAEos3LhgUgmpwnF6qNMlnFqVnJ4YfCgvODHDo5WAHidrUwA+a5uc27Dgdzg0YxRlAByKBASHSACJDPI4JC5OFImCXm8kXBboQwCgLr9-oQgSDwTCQnN6D4Ea9kSscJMINNxPlCt1yTdbpI0RjEYz3pJPu52eTmQ9GrzkQshCsGbkTmcLlckR8vj8-oDgaCIfJSRzUejMYqccr8fJCSliTB1RzcFSaXSOuK+SytUKmVyvg7ciKuj0+gMYEMLgBhI1pMb7a5zMpwFJUfCGEDAGAAQS8hAA7h04Jkg2mnss3qGIKZaRBdGMwWEUGC3WKhCGUmH6GHMshgoogvQyLcMXEnkHRblrpLzpcye9uS6maNcOJJ3grcUuL7ONgdo8mnAAIxMZg8UjpHB1mDMSSjo63cc4SfiadIAodEqcOMLuBLxolAAMG7gh6Hx9P58v19nnDSA+T42K+76fhqP5TnkV6FLe86LpEy5gYwB5HncUEXjB-63powFIc+cBvqhH7obktyGPgBTDCkvrGMAaAANY7hGUYxvGiYplAjBPAAKhU7FIAAhMylHUV4R7MiO1xut0ghIHIojwGESCkCg+DGPA-rzDA-BAA

• javascript
• reactjs
• typescript

• Ref usually should have a type (Ref<T>). In your case, I suspect it's createRef<Box> although I don't remember whether it's the proper typing for a custom ponent. The simplest to get around with that (although it's not a beautiful solution since you lose intellisense), is to just do createRef<any>. You might want to take a look at this: stackoverflow./questions/33796267/… . The problem is basically that Ref<unknown> cannot satisfy the ref constraints of the child. – briosheje Commented Oct 15, 2021 at 7:46
• @briosheje it doesn't work with createRef<any>, I get the same message. – user14399919 Commented Oct 15, 2021 at 7:48
• could you please share minimum reproducible example in one file in TypeSsript playground ? – captain-yossarian from Ukraine Commented Oct 15, 2021 at 7:49
• @captain-yossarian I edited the post with the link you requested, but I get a lot of errors that I don't know how to fix. – user14399919 Commented Oct 15, 2021 at 7:57

1 Answer 1

If you want to use ref, you should wrap Box into forwardRef:

import React, { useRef, useState } from 'react';
import './Box.css';
import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';

type content = {
  letter: string,
  draggable: number
}

const Box = React.forwardRef<HTMLDivElement, content>((props, ref) => {
  if (props.draggable) {
    return (
      <Draggable>
        <div className="box box-drag">
          <span className="box-content">
            {props.letter}
          </span>
        </div>
      </Draggable>
    );
  }
  return (
    <div className="box">
      <span className="box-content">
        {props.letter}
      </span>
    </div>
  );
});



function Content() {
  const onSubmitAnswer = () => {
    console.log("da");
  };

  const test = React.createRef<HTMLDivElement>();

  return (
    <div>
      <Box {...{ letter: 'C', draggable: 1 }} ref={test} />
      <Box {...{ letter: 'A', draggable: 0 }} />
      <Box {...{ letter: 'B', draggable: 0 }} />
      <Box {...{ letter: 'C', draggable: 0 }} />
      <Box {...{ letter: 'D', draggable: 0 }} />
      <button onClick={onSubmitAnswer}>Trimite!</button>
    </div>
  );
}

export default Content;

PLayground

ref expects to be HTML element. Thats why I have provided HTMLDivElement for const test = React.createRef<HTMLDivElement>();. It is up to you which HTML element it should be.

Box is wrapped into forwardRef with explicit generic arguments: React.forwardRef<HTMLDivElement, content>