Learn Form Validation by Building a Calorie Counter - Step 48

Tell us what’s happening:

New code: ;

Return: SyntaxError: unknown: Support for the experimental syntax ‘jsx’ isn’t currently enabled (24:3):

22 | const HTMLString = 23 | <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>;

24 | ;
| ^
25 |
26 | }

Add @babel/preset-react (babel/packages/babel-preset-react at main · babel/babel · GitHub) to the ‘presets’ section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (babel/packages/babel-plugin-syntax-jsx at main · babel/babel · GitHub) to the ‘plugins’ section to enable parsing.

Your code so far

<!-- file: index.html -->

/* file: styles.css */

/* file: script.js */
// User Editable Region

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
  const HTMLString = `
  <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>`;
  <input type="text" placeholder="Name" id="${entryDropdown.value}-${entryNumber}-name" />;
  
}

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 48

you need to keep writing in the template literal

1 Like