Hi there
I just keep getting this outcome and I’m not sure what changes I need to make, or where
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 | yarn add
@babel
/preset-react --dev 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.
After your
label
element, and on a new line in your template string, create an
input
element. Give it a
type
attribute set to
text
, a
placeholder
attribute set to
Name
, and an
id
attribute that matches the
for
attribute of your
label
element.
const calorieCounter = document.getElementById('calorie-counter');
const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;
function cleanInputString(str) {
const regex = /[+-\s]/g;
return str.replace(regex, '');
function isInvalidInput(str) {
const regex = /\d+e\d+/i;
return str.match(regex);
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" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />;
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Learn Form Validation by Building a Calorie Counter - Step 46
freecodecamp.org
const HTMLString = `
<label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>`;
<input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />;
delete the backtick after the ‘label’ line, as well as the semi-colon,
delete the semi-colon at the end of the ‘input’ line
add the backtick after the closing angle bracket > of the ‘input’ element.
This lesson really confused me for quite awhile. While the information is provided is accurate, and helped me understand, and solve the problem, I don’t feel that it is presented in a way that is clear to the WHY of what the problem is, or what the instructions are explicitly asking of you.
The reason , at least as I currently seem to understand it, that it is asking you to do so in a “new line” while “inside the template literal” is the important distinction, and what makes this step kind’ve pernicious (troublesome and tricky) to deal with, because the backtick and semi-colon are provided for you as part of the “solution” but they’re actually no longer part of the correct solution in their current position, because you’re now adding TO the template literal statement, so the new code you’re adding needs to be inside of the backtick.
When the line of code ends with
the backtick and semi-colon are closing the template literal, so anything you add after that won’t be part of the template literal, in the way that the machine comprehends your code. So by deleting the backtick and semi-colon, and instead replacing them at the end of your input label, you are including that code to be part of the template literal as a cohesive whole.
const HTMLString = backtick
now the input element is contained within the template literal of the variable, HTMLString, and is included, instead of separately defined.
Cheers,
edit: So adding the backticks made the forum try to actually use my code, so instead I wrote out backtick. You should use the backtick character, not write out backtick, lol.
