0

I have an array of objects which I rendered using map. Each object is sent into a Card component. Code like this:

const storeDetails: IStores[] = [
  {
    id: 1,
    title: Tesco
  },
  {
    id: 2,
    title: Asda
  }
];

const Home = () => {
  return (
    <div>
      {
        storeDetails.map(
          (d) => {
            return (
              <Card store={d} key={d.id} />
            )
          }
        )
      }
    <div/>
  )
};

export default Home;

The Card component:

interface Props {
  store: IStores
}

const Card = ({store: {id, title}}: Props) => {
  return (
    <>
      <div key={id}>
        {title}
      </div>
    </>
  )
}

export default Card

Now the 2 rendered cards have different height. I'd like to get the height of the taller card and set both cards the same height as this height. From this answer, I need to use useRef hooks. I changed Home to this:

const Home = () => {

  const cardRef = useRef(null);
  
  return (
    <div>
      {
        storeDetails.map(
          (d) => {
            return (
              <Card store={d} key={d.id} ref={cardRef}/>
            )
          }
        )
      }
    <div/>
  )
};

Then there is an error at ref={cardRef}:

Type '{ store: IStores; key: number; ref: MutableRefObject<any>; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & Props'.

I understand there is no ref props in Card component, but any idea how I could set it up and fix this? Thanks in advance!

one-hand-octopus
  • 2,229
  • 1
  • 17
  • 51

1 Answers1

0
  1. Wrap Card in forwardRef to pass ref to component. After assign ref to HTML element.
  2. You assigning 1 ref to every card in array, what do you expect to get in ref object? If you want to get heights of every card - every card must be assigned it's own ref.
Walkalone
  • 1
  • 1
  • 1