dollar sign symbol is not working in React-CodePudding

I am building a CRUD app with React. For the Product Edit page where I want to edit a specific product(clicked product), I need to grab the product's Id. I use the dollar symbol in the code but it doesn't get blue(it doesn't work). I need the URL to change the specific product showing its id when clicked. How to do that? What am I doing wrong?

<Link className='btn btn-primary m-2'><i className="fa fa-eye" aria-hidden="true"></i></ Link>
          <Link className='btn btn-otline-primary m-2' to={"/product/edit/${product.id}"}>Edit</Link>
          <Link className='btn btn-danger m-2'>Delete</Link>

const onSubmit = async e => {
  e.preventDefault();
  await axios.put('http://localhost:3001/products/${id}', product);
  navigate.push("/");
  };

I thought when I clicked the Edit button I could see the Edit page for the specific product but instead it shows like this: http://localhost:3000/product/edit/${product.id}. Not an id after the editing part.

CodePudding user response：

Should be `` not ''

 await axios.put(`http://localhost:3001/products/${id}`, product);

CodePudding user response：

Template literals are created using the ` symbol, this works:

let x = "def"
console.log(`abc${x}`);
// Prints: "abcdef"

But normal strings don't:

let x = "def"
console.log("abc${x}");
// Prints: "abc${x}"

See MDN Reference to learn more about how template strings work.