CODEWITHSUNDEEP
reactjscomponents
Marco
Marco

Reputation: 1205

Unterminated JSX contents in React App Component

I'm learning React and enjoying it. Learning about how to pass data between component following the code in this post:

https://travishorn.com/passing-data-between-classes-components-in-react-4f8fea489f80

Which was written in ES5 and I'm trying to write it in ES6 as in the following code:

 class NameInput extends React.Component {   render() {
     return (    <div>
         <label for="name">Name</label>
         <input id="name" value={this.props.name} onChange={this.props.onChange} />
       </div>
           );
         }
       }

 class DisplayName extends React.Component {   render() {
     return (
            <p>My name is {this.props.name}.</p>
           );
         }
       }


 class App extends React.Component {
     constructor(props) {   super(props);   this.state = ""; }

  getInitialState = () => {
         return {
           name: this.props.name,
         };   
        }   

  changeName = (event) => {
         return this.setState({ name: event.target.value })   
         } 

  render(){   return(
           <div>
             <NameInput name={this.state.name} onChange=  `{this.changeName} />`                                        
             <DisplayName name={this.state.name} />
          <div/>
          );   } }    
          ReactDOM.render(<App name="Travis"/>, mountNode);

Using this online tool: jscomplete.com When I try to run the code I get the following error:

SyntaxError: unknown: Unterminated JSX contents (40:36)

  38 |   }
  39 | }
> 40 | ReactDOM.render(<App name="Travis"/>, mountNode);
     |                                     ^
  41 |

Just copy and paste that code into jscomplete.com and run it. You don't need an account.

I have been staring at the screen for over an hour going over it line by line and I can't figure out where is the mistake. Could anyone please save me so I can understand what did I do wrong? It is a small example and I'm sure there is someone out there that can help me. I appreciate the help.

Upvotes: 1

Views: 1936

Answers (1)

Sarah Hailey
Sarah Hailey

Reputation: 494

Just a small typo! You have <div/> instead of </div> in your closing tag. :)

(you also have some back ticks in your NameInput component)

Upvotes: 3

Related Questions