Why $ is a String and not Identifier in React Js

Question

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>
      )
    }

${xxx} works inside `` only ... not '' or ""

Bravo
– Bravo

2022-03-19 07:15:29 +00:00
Commented Mar 19, 2022 at 7:15 — Bravo
– Bravo, Commented Mar 19, 2022 at 7:15

Matsu · Accepted Answer · 2022-03-19 07:53:49Z

1

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

edited Mar 19, 2022 at 7:53

answered Mar 19, 2022 at 7:12

Matsu

3431 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why $ is a String and not Identifier in React Js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related