V
V
Vanya Huk2018-02-28 00:48:44
React
Vanya Huk, 2018-02-28 00:48:44

Why does an error occur when using if?

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
5a95d1eb51b48035477447.png

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Anton Spirin, 2018-02-28
@vanyahuk

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!");

R
Roman Aleksandrovich, 2018-02-28
@RomReed

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question