return function returning预期的赋值或函数调用，而是看到一个表达式

Question

I have a simple program in which i am making a simple form

import React, { Component } from "react";


class App extends Component {
  render() {
    return
    (
      <div className="container">
        <form>
          <label>First Name</label>
          <input type="text" name="firstname" placeholder="Your name.." />

          <label>Last Name</label>
          <input type="text" name="lastname" placeholder="Your last name.." />

          <label>Subject</label>
          <textarea name="subject" placeholder="Write something.."></textarea>

          <input type="button" value="Submit" />
        </form>
      </div>
    )
  }
}

export default App;

When i am returning a simple text in return then it's working properly.

Answer 1

return and the code you're returning should be on the same line, otherwise automatic semicolon insertion will add a semicolon, thereby terminating your function unexpectedly:

class App extends Component {
  render() {
    return ( // Return and '(' should be on the same line here
      <div className="container">
        <form>
          <label>First Name</label>
          <input type="text" name="firstname" placeholder="Your name.." />

          <label>Last Name</label>
          <input type="text" name="lastname" placeholder="Your last name.." />

          <label>Subject</label>
          <textarea name="subject" placeholder="Write something.."></textarea>

          <input type="button" value="Submit" />
        </form>
      </div>
    );
  }
}

More info about ASI in JS .

Also I'd recommend using some kind of code formatter, like prettier . With default settings it will format your code and insert the semicolon the way ASI would do it, making this easier to debug.