how can i use if inline react jsx

Question

I wanna use 'if' in react router for check user is login but i don't know about correct syntax:

const RouteWithSubRoutes = (route) => (
  <Route exact path={route.path} render={props => (
      <route.component {...props} routes={route.routes} render = {props => (
          fakeAuth.isAuthenticated != true ? (
              <Redirect to={{
                pathname: '/signIn',
                state: { from: props.location }
          }}/>
          )
      )}/>
  )}/>
);

in this sample i wanna check if fakeAuth.isAuthenticated != true then redirect

Przemysław Zalewski · Accepted Answer · 2017-06-17 11:47:49Z

In order to conditionally render an element please use the logical AND && or a ternary operator, returning falsy value (null, false, undefined, etc.) when the condition is not met. React won't render nulls, undefined values, and false booleans.

fakeAuth.isAuthenticated != true ? (
  <Redirect to={{
    pathname: '/signIn',
    state: { from: props.location }
  }}/>
) : null

If you just want to render an element or not - then use {condition && <Element />} syntax, or when you want to render different components based on some condition then use ternary: {condition ? <ElementA /> : <ElementB />}.

const Redirect = () => <div>Redirect</div>

const TernaryExample = ({fakeAuth}) =>
<div>
{
  fakeAuth.isAuthenticated != true ? (
    <Redirect /> 
  ) : null
}
</div>

const AndExample = ({fakeAuth}) =>
<div>
{
  !fakeAuth.isAuthenticated  && <Redirect />
}
</div>

const Examples = ({fakeAuth}) =>
<div>
  <AndExample fakeAuth={fakeAuth} />
  <TernaryExample fakeAuth={fakeAuth} />
</div>
  
ReactDOM.render(
  <Examples
    fakeAuth={{isAuthenticated: false}}
  />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

Ejaz Karim · Accepted Answer · 2017-06-17 11:28:16Z

0

Your code is fine you forgot the else part.

 const RouteWithSubRoutes = (route) => (
 <Route exact path={route.path} render={props => (
  <route.component {...props} routes={route.routes} render = {props => 
 (
      fakeAuth.isAuthenticated != true ? (
          <Redirect to={{
            pathname: '/signIn',
            state: { from: props.location }
       }} />
      ) : null //here is the else.
   )}/>
 )}/>
);

answered Jun 17, 2017 at 11:28

Ejaz Karim

3,6966 gold badges39 silver badges50 bronze badges

Collectives™ on Stack Overflow

how can i use if inline react jsx

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related