Esta línea de códigos da error
listRef.current.style.transform = 'translateX(${230 + distance}px)' import { ArrowBackIosOutlined, ArrowForwardIosOutlined } from '@material-ui/icons'; import React, { useRef } from 'react' import "./list.scss"; import ListItem from "../listItem/ListItem"; export default function List() { const listRef = useRef() const handleClick = (direction) => { let distance = listRef.current.getBoundingClientRect().x - 50 if(direction === "left"){ listRef.current.style.transform = 'translateX(${230 + distance}px)' } } return ( <div className='list'> <span className="listTitle">Continue to watch</span> <div className="wrapper"> <ArrowBackIosOutlined className="sliderArrow left" onClick={()=>handleClick("left")}/> <div className="container" ref={listRef}> <ListItem/> <ListItem/> <ListItem/> <ListItem/> <ListItem/> <ListItem/> <ListItem/> <ListItem/> <ListItem/> <ListItem/> <ListItem/> </div> <ArrowForwardIosOutlined className="sliderArrow right" onClick={()=>handleClick("right")}/> </div> </div> ) }Cambia tu código de
const handleClick = (direction) => { let distance = listRef.current.getBoundingClientRect().x - 50 if(direction === "left"){ listRef.current.style.transform = 'translateX(${230 + distance}px)' } }a
const handleClick = (direction) => { let distance = listRef.current.getBoundingClientRect().x - 50 if(direction === "left"){ listRef.current.style.transform = `translateX(${230 + distance}px)` } }Lo que necesita se llama literal de plantilla en js.
Tipo Plantilla Literal:
Mac: Shift + ` en el teclado
Consulte: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals