I'm getting the error:

Error: Unexpected token. Did you mean {'}'} or }? JSX element

With this code:

function CompositeCntl() {
  return (
    <div>
    <Button />
    <Display />
    <div/>
    );
}

CodePudding user response：

I accidentally put the slash after the closing div, this is how to correct it:

function CompositeCntl() {
  return (
    <div>
    <Button />
    <Display />
    </div>
    );
}

CodePudding user response：

Another cause:

function Button(props) {
  const handleClick = () => props.onClickFunction(props.increment)}>
     {props.increment};
    return (
    <button onClick={handleClick}
    </button>
    );
}

Solution, the position of the closing tag > :

function Button(props) {
  const handleClick = () => props.onClickFunction(props.increment)}
     {props.increment};
    return (
    <button onClick={handleClick}>
    </button>
    );
}

CodePudding user response：

{<div/> }--> self-closing {<div></div>} ---> closing tag