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 ponent functions. Help would be greatly appreciated

import React,{useRef} from 'react';
import { Card } from '../ponents';
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 ponent functions. Help would be greatly appreciated

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 ponent functions. Help would be greatly appreciated

import React,{useRef} from 'react';
import { Card } from '../ponents';
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 ponent functions. Help would be greatly appreciated

• javascript
• reactjs
• frontend

Share Improve this question Follow edited Oct 13, 2021 at 5:32 Anthony U asked Oct 13, 2021 at 1:12 Anthony UAnthony U 3122 silver badges66 bronze badges 2

• Can you share the Card ponent code, and specifically Card.List? We need to see how it is handling the React ref. – Drew Reese Commented Oct 13, 2021 at 1:15
• Can we now also see the List ponent? From what I can see so far, you'll at least need to forward the passed React ref on to the List ponent. ref isn't a regular prop and isn't passed on vie the spread syntax. – Drew Reese Commented Oct 13, 2021 at 5:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

You haven't posted List ponent'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 ponent 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 ment on this answer, since CardList is just transfering the same props from a parent ponent to List, you can simply assign List to Card.List, then only one step of ref forwarding would be enough:

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

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

Card.ListTitle=ListTitle
Card.Wrapper=Wrapper

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 ment in place after my element (MUI <Snackbar> element, in my case).

Error(s):

My code snippet looked something like:

      <Snackbar open={snackbarOpen} autoHideDuration={5000} onClose={()=>setSnackbar(false)} > {/* My Comment Here */}

            <>...</> 

      </Snackbar>

Quite similar place of JSX ment as your Card Component

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

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

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