TypeError: Cannot read properties of undefined (reading 'style')

Question

Been stuck on debugging this for quite a while. I'm trying to have a group of items change onClick but with the use of transform but 'style' is undefined. I've also included the Card component functions. Help would be greatly appreciated

import React,{useRef} from 'react';
import { Card } from '../components';
import { CardItemContainer } from './card-item';

export function CardContainer() 
 {


const listRef=useRef()

const handleClick=(direction)=>
{
    if(direction==="left")
    {
         listRef.current.style.transform=`translate(230)`

    }
}

    return(
        <Card>
        
            <Card.ListTitle> Continue to watch</Card.ListTitle>
            <Card.Wrapper >
                <Card.ArrowSliderLeft onClick={()=>handleClick('left')}/>
                <Card.List ref={listRef}> 
                  <CardItemContainer index={0}/>
                  <CardItemContainer index={1}/>
                  <CardItemContainer index={2}/>
                  <CardItemContainer index={3}/>
                  <CardItemContainer index={4}/>
                  <CardItemContainer index={5}/>
                  <CardItemContainer index={6}/>
                  
                </Card.List>
                <Card.ArrowSliderRight  onClick={() => handleClick("right")}/>
            </Card.Wrapper>
        </Card>
    )
}

Card Components

import {ArrowBackIosOutlined,ArrowForwardIosOutlined} from "@material-ui/icons";
import React, {} from 'react';

import {
    Container,
    List,
    ListTitle,
    Wrapper,
    ArrowSliderLeft,
    ArrowSliderRight 

} from './styles/card';

 export default function Card({ children, ...restProps }) {

    return <Container {...restProps}>{children}</Container>
  }


Card.ListTitle=function CardListTitle({children,...restProps})
{
    return <ListTitle{...restProps}> {children} </ListTitle>
}

Card.Wrapper=function CardWrapper({children,...restProps})
{
   
    return <Wrapper{...restProps} > {children} </Wrapper>

}

Card.List=function CardList({children,...restProps})
{
     return <List{...restProps} >{children}</List>
}

Card.ArrowSliderLeft = function HeaderArrowBackIosOutlinedSymbol({...restProps })
 {
    return <ArrowSliderLeft {...restProps }>
        {/*id allows me to style the icon directly */}
                <ArrowBackIosOutlined id="sliderLeft"/> 
           </ArrowSliderLeft>
}

   

Card.ArrowSliderRight = function HeaderArrowForwardIosOutlinedSymbol({...restProps}) {
 
  
  return (
    <ArrowSliderRight {...restProps}>
      <ArrowForwardIosOutlined id="sliderRight"/>
    </ArrowSliderRight>
  );
};

Ignore : Been stuck on debugging this for quite a while. I'm trying to have a group of items change onClick but with the use of transform but 'style' is undefined. I've also included the Card component functions. Help would be greatly appreciated

Answer 1

Function components like CardList don't have a ref property, only class components or DOM elements do.

You haven't posted List component's implementation, but let's assume it has a <ul> tag, and that is what you eventually need to manipulate its .style.transform

CardList >>> List >> ul (this is the element you need to pass the ref)

To pass the listRef all the way to ul from CardList you need to use the forwardRef technique.

Card.List=React.forwardRef(function CardList (props,ref)
{
     const {children,...restProps} = props
     return <List{...restProps} ref={ref} >{children}</List>
})

the List component itself :

const List = React.forwardRef(function (props,ref) {
           return <ul ref={ref}>
           ... the implementation of your List
             

Now you can pass listRef in here and it goes down the chain:

 <Card.List ref={listRef}> 

Side Note : taking from Drew Reese's comment on this answer, since CardList is just transfering the same props from a parent component to List , you can simply assign List to Card.List , then only one step of ref forwarding would be enough:

Card.List = List // CardList component isn't used anymore.

The same thing could work for Card.ListTitle and Card.Wrapper :

Card.ListTitle=ListTitle
Card.Wrapper=Wrapper

Answer 2

I too have just faced this same issue, and have tried to get my code working again. Checking similarity between your given code and my erroneous code snippet helped me fix the error. Strangely, I have faced this error with a JSX multi-line comment in place after my element ( MUI < Snackbar > element, in my case).

Error(s):

My code snippet looked something like:

Card.ArrowSliderLeft = function 
    ...
    return <ArrowSliderLeft {...restProps }>
        {/*id allows me to style the icon directly */}
                <ArrowBackIosOutlined ... /> 
           </ArrowSliderLeft>

Quite similar place of JSX comment as your Card Component

Card.ArrowSliderLeft = function ... return <ArrowSliderLeft {...restProps }> {/*id allows me to style the icon directly */} <ArrowBackIosOutlined ... /> </ArrowSliderLeft>

Removing just the comment part {/* */} immediately following an opening tag worked for me. So, try removing your JSX comment or placing it elsewhere,and see if it helps.

Sharing it here just for my and others future reference. :)