Why does an error occur when using if?

Question

React

here is the code

render() {


           return( <MuiThemeProvider>
                <AppBar title={false} showMenuIconButton={false}>

                    {if( this.props._sharedData.auth_user == 1 ){

                        <IconMenu
                        iconButtonElement={
                        <IconButton style={{height: '64px'}}>
                            <MoreVertIcon color={white}/>
                        </IconButton>}
                        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
                        targetOrigin={{horizontal: 'right', vertical: 'top'}}>

                        { Object.keys(this.props._sharedData.loc.account).map(
                            (item, i) => (
                                <MenuItem primaryText={this.props._sharedData.loc.account[item]}/>
                            ))}

                        </IconMenu>
                    }

                }

                </AppBar>
            </MuiThemeProvider> )
    }

and screenshot of the error

Answer 1

Because it's JSX . Can be corrected like this:

render() {
  const { _sharedData: { auth_user } } =  this.props;

  const shouldShowIconMenu = +auth_user === 1;

  return (
    <AppBar>
      {shouldShowIconMenu && (
        <IconMenu>
          ...
        </IconMenu>
      )}
    </AppBar>
  );
}

As a result of the translation, we get an invalid code:

React.createElement("div", { id: if (condition) { 'msg' } }, "Hello World!");

Answer 2

this.props._sharedData.auth_user == 1 ?
 <IconMenu
                        iconButtonElement={
                        <IconButton style={{height: '64px'}}>
                            <MoreVertIcon color={white}/>
                        </IconButton>}
                        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
                        targetOrigin={{horizontal: 'right', vertical: 'top'}}>

                        { Object.keys(this.props._sharedData.loc.account).map(
                            (item, i) => (
                                <MenuItem primaryText={this.props._sharedData.loc.account[item]}/>
                            ))}

                        </IconMenu>
:null