This line of codes get 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>
)
}Change you code from
const handleClick = (direction) => {
let distance = listRef.current.getBoundingClientRect().x - 50
if(direction === "left"){
listRef.current.style.transform = 'translateX(${230 + distance}px)'
}
}
to
const handleClick = (direction) => {
let distance = listRef.current.getBoundingClientRect().x - 50
if(direction === "left"){
listRef.current.style.transform = `translateX(${230 + distance}px)`
}
}
What you need is called template literal in js.
Type Template Literal:
Mac: Shift + ` on keyboard
Refer to: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals