I'm new to reactjs. I'm trying to put a condition in the render return method to show component. I'm getting the following error.
./components/Layouts/Header.js
SyntaxError: /home/user/Desktop/pratap/reactjs/society/society-front/components/Layouts/Header.js: Unexpected keyword 'this' (14:8)
  12 |   render() {
  13 |     return (
> 14 |       { this.props.custom ? <CustomStyle /> : <DefaultStyle /> }
     |         ^
  15 |     );
  16 |   }
  17 | }
Here is my component code -
import React from "react";
import CustomStyle from "./CustomStyle";
import DefaultStyle from "./DefaultStyle";
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      custom:this.props.custom
    }
  }
  render() {
    return (
      { this.props.custom ? <CustomStyle /> : <DefaultStyle /> }
    );
  }
}
export default Header;
                You can't return an operator when you are explicitly returning JSX,  Wrap your code in a Fragment:
  render() {
    return (
      <>{ this.props.custom ? <CustomStyle /> : <DefaultStyle /> }</>
    );
  }
Or remove the separator:
render(){
    return this.props.custom ? <CustomStyle /> : <DefaultStyle />
}
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With