React无法渲染，出现了未终止的JSX内容错误

Question

class HelloWorldComponent extends React.Component {

  render() {
    const person = {"name":"james"};
    return (      
      <input type="text" placeholder="name" value={person.name}>      
    );
  }
}

React.render(
  <HelloWorldComponent />, document.getElementById('react_example')
);

http://jsbin.com/lalomigufo/edit?js,console,output

Not sure what is wrong, I got error of Unterminated JSX contents when I try to exam my code in https://babeljs.io

Answer 1

Input is a self closing tag. You need to add the "/" at the end of the input element:

return (      
  <input type="text" placeholder="name" value={person.name} />      
);

Answer 2

As the document from facebook :

In HTML, form elements such as , , and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState()

So, your code put the constant value to value attribute, it's wrong, this value cannot be changed and you can type anything.