React：未终止的JSX

Question

I am relatively new to react. I was trying to split my code in App.js components. Now, I am getting an error.

  ./src/containers/App.js
Syntax error: Unterminated JSX contents (64:12)

  62 |           Toggler = {this.togglerPersonHandler} />
  63 |           {person}
> 64 |       </div>
     |             ^
  65 |      )
  66 |    }
  67 | }

Here is my cockpit.js file ( inside src/components/cockpit/cockpit.js )

import React from 'react';
import classes from './cockpit.css';

const Ccockpit = (props) => {
  const assignedClasses = [];
  let btnClass = ''
  btnClass = cockpit.red;

  if (cocPersonState) {
      btnClass = cockpit.red;
  }

  if (props.cocperson.length <= 2) {
    assignedClasses.push(classes.red)
  }
  if (props.cocperson.length <= 1) {
    assignedClasses.push(classes.bold)
  }
  return(
    <div className={classes.cockpit}>
      <h1> Hi I am react App</h1>
      <p className={assignedClasses.join(' ')}>hey </p>
      <button className={btnClass}
      onClick={props.Toggler}>Button</button>
    </div>
  );
}

export default Ccockpit;

And this is what I am doing in App.js file (src/containers/app.js)

import React, { Component } from 'react';
import classes from './App.css';
import Cperson from '../components/person/person.js';
import Ccockpit from '../components/cockpit/cockpit.js';

class App extends Component {
(some code here) 

render() {
(some code here) 
return (
      <div className={classes.App}>
      <Ccockpit>
          cocPersonState = {this.state.showPerson}
          cocperson = {this.state.person}
          Toggler = {this.togglerPersonHandler} />
          {person}

      </div>
     )
   }
}
export default App;

Any Idea what could be wrong here? and fixes for the same?

Answer 1

Try this:

<Ccockpit
          cocPersonState = {this.state.showPerson}
          cocperson = {this.state.person}
          Toggler = {this.togglerPersonHandler} />