Issue encountered when submitting form: Error identified as "Unexpected string expression without template curly in string"

As a novice in React.js, I am facing an issue where setState is not functioning properly when submitting a form. Any suggestions on how to resolve this problem?

> class  Home extends Component{ constructor(props){
    >     super(props)
    >     this.state = {
    >         username:'',
    >         email:'',
    >         message:''
    >     } }
    > 
    > handleUsernameChange = (event) => { //event as parameter to capture
    > value
    >     this.setState({
    >         username: event.target.value
    >     }) } handleEmailChange = (event) => { //event as parameter to capture value
    >     this.setState({
    >         email: event.target.value
    >     }) } handleMessageChange = (event) => { //event as parameter to capture value
    >     this.setState({
    >         message: event.target.value
    >     }) }
    > 
    > handleSubmit = (event) =>{
    >     alert('${this.state.username} ${this.state.email} ${this.state.message}')
    >     event.preventDefault() }

https://i.stack.imgur.com/10gm1.png

Answer №1

To properly format your code, it's recommended to replace single quotes with backticks when needed.

alert(`${this.state.username} ${this.state.email} ${this.state.message}`);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating an HTML table from a JSON string with AngularJS

I am completely new to angularjs and have been delving into it for the past few days. I now need to convert a JSON string from a REST endpoint into tabular data. Below is the code I've been working on. $scope.getDataCatalogue = function(){ $ ...

Employing CSS animations to elevate div elements

Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...

Navigating between articles using React.js and Next.js

Imagine a scenario with two articles (for the complete example, visit https://github.com/codebushi/nextjs-starter-dimension/blob/master/components/Main.js) import PropTypes from 'prop-types'; class Main extends React.Component { render() { ...

Code-based document editing with CouchBase

To test Couchbase, I need to create a servlet that will edit 1,000 JSON documents by changing the value of '"flag": false' to '"flag": true'. How can I achieve this task? Here is my view code for finding documents with '"flag": fa ...

Issue: In React Chart Component, encountering a TypeError while attempting to access properties of an undefined object, specifically the 'year' property. Seeking a solution for implementing filtering by year

I've run into a TypeError while working on a React project that involves using a Chart component to showcase user analytics data fetched from an API. Additionally, I'm looking for advice on how to incorporate filtering by year. The error message ...

Incorrect synchronization in the SVG arrow animation

How come the arrow doesn't start moving at the same time as the line? Is there a synchronization issue? I want the arrow to begin its journey simultaneously with the line. .container{ width:100%; padding:0px; background-color: black; } .squig ...

Using ServiceStack to deserialize an array

My goal is to post the following data to my ServiceStack web service: $.ajax({ url: 'http://localhost:8092/profiles', type:'POST', data: { FirstName : "John", LastName : "Doe", Categories : [ "Catego ...

Tips for querying orchestrate.io

Recently, I found myself in need of a user-friendly database for a small highscore system in my game development projects using JavaScript. Through the Github student developer pack, I came across Orchestrate.io. After discovering a suitable driver module ...

Problems encountered when trying to deploy on Firebase

I've been working on deploying my web app to Firebase, and I successfully ran the deploy script. However, when I try to access the URL, instead of seeing my app, I'm greeted with the Open Hosting Documentation page. Here is what my firebase.json ...

Are you looking to implement server-side input validation for your React.js application?

In my React.js application, I have a form that collects user input. The client side code handles validation, with all the .js files bundled using webpack into a single bundle.js file. The JS is minified and obfuscated for security purposes. Do we still nee ...

Switch the text style when hovering, then switch it back upon second hovering

Searching for a method to modify the font of individual letters when hovering over them. The goal is for the letters to revert back to their original font after a second hover (not on the first hover-off). Any assistance would be greatly valued! ...

Revise the form used to edit data stored in Vuex and accessed through computed properties

My form component is used for client registration and editing purposes. Upon creation of the form component, I check if there is an ID in the URL to determine which type of form to display. If no ID is present (indicating a new client registration), all fi ...

Using ng-repeat to iterate over forms in AngularJS

I have implemented dynamic forms using the ng-repeat directive where form fields are generated based on the userid value. The requirement is that the add user button should be enabled only when all form fields are filled. However, currently the button rema ...

It's impossible for me to align two blocks at the same level

Check out the following code snippet. I am trying to group mid_left and mid_right within a single mid div tag, but struggling with positioning mid_right correctly - either outside of the mid tag or not at the same level as mid_left. I have experimented wit ...

What is the process for aligning rows with the selected option from the drop-down menu

Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...

Tips for identifying tablet devices using the deviceDetector module in AngularJS

Having an issue with a Samsung Tablet. I need to display certain content for mobile devices, but not tablets. Device detection results: - isMobile(): true - isTablet(): false Here is the detailed data from the module: {"raw":{"userAgent":"Mo ...

Retrieve information from MongoDB using Node.js

const postSchema = mongoose.Schema({ id: String, name: String, isbn: String, image: String, }) var PostMessage = mongoose.model('PostMessage', postSchema); const getBookById = async (req, res) => { const { id } = req.params; t ...

What could be causing the issues with SSL certificates when using Node.js/Express-TypeScript?

I'm currently in the process of transitioning a project's backend from JavaScript (Node.js/Express) to TypeScript. However, I've encountered an unusual issue where FS's readFileSync is unable to access the key.pem or cert.pem files in t ...

Ways to eliminate unused classes from JQuery UI

We have successfully implemented JQuery UI library for enhancing our interface. However, since we no longer need to support outdated browsers like IE6, classes such as .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl are unnecessary and clu ...

Issue with multi-level bootstrap navbar: Unable to hover on child elements

Currently, I am working on implementing a multi-level navbar in my project using Bootstrap Navbar along with additional CSS and Jquery. If you want to review the codes, they can be found at: CodePen $(function() { // ------------------------------- ...