Parsing error: Unexpected token when adding a conditional in react

Question

Hi I'm a beginner in react, I was getting an error for scenarios when no props get passed to my component, it said something like "you can't do a map of undefined" so I added this if statement. But now I get a parsing error on line 4. Not sure' what's wrong with my code:

import React from 'react';

export const Record = props => (
  if (props) {
    <div className='card-container'>
      {props.rows.drivingInstructions.map((val, ind) => {
        return (
          <tr>
            <td>{ind + 1}</td>
            <td>Smith</td>
            <td>50</td>
          </tr>
        )
      })}
    </div>
  }
    { console.log(props.rows.drivingInstructions) }
);

I don't see you actually returning anything from this component — dwosk
– dwosk, Commented Oct 3, 2020 at 17:38

CertainPerformance · Accepted Answer · 2020-10-03 17:55:34Z

3

if can't exist in an expression context. For similar reasons, you can't do:

const someVar = if (true) 10 else null;

The syntax is not permitted. To do something like this, you need the conditional operator:

export const Record = props => (
  !props.rows || !props.rows.drivingInstructions ? null : (
    <div className='card-container'>
      {props.rows.drivingInstructions.map((val, ind) => {
        ...

Or, if you're OK with the .card-container existing even if it doesn't have any rows, use optional chaining instead:

export const Record = props => (
  <div className='card-container'>
    {props.rows.drivingInstructions?.map((val, ind) => {
        ...

edited Oct 3, 2020 at 17:55

answered Oct 3, 2020 at 17:39

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PierceF Over a year ago

Oh wow! thank you! I did not know about that rule and technique. The first solution still gave me the error "TypeError: Cannot read property 'map' of undefined" but your second solution worked 🙏🙏 that chaining technique is very cool!

PierceF Over a year ago

My apologies, the first method also works, I just did not copy it properly 🤦‍♂️

PierceF Over a year ago

could you please elaborate on the purpose or meaning of this code? !props.rows || !props.rows.drivingInstructions

CertainPerformance Over a year ago

If either of those are falsey, it evaluates to null. Otherwise, it evaluates the .map

PierceF Over a year ago

Done! sorry about that, was unfamiliar with this platform too 😅

Kevin Moe Myint Myat · Accepted Answer · 2020-10-03 18:32:27Z

1

I would rewrite those code as below.

import React from 'react';

export const Record = (props) => {

  if (!!props?.rows?.drivingInstructions?.length) {

    return (<div className='card-container'>
      {props.rows.drivingInstructions.map((val, ind) =>(
          <tr>
            <td>{ind + 1}</td>
            <td>Smith</td>
            <td>50</td>
          </tr>
        )
      )}
    </div>);
   }

    return <div>No Driving Instructions</div>;
  }
   
};

This !!props?.rows?.drivingInstructions?.length is an optional chaining and it checks that those properties are not nullish. Lastly, it ensures the length is also more than 0 by converting to boolean using !!.

answered Oct 3, 2020 at 18:32

Kevin Moe Myint Myat

2,1851 gold badge12 silver badges19 bronze badges

Comments

Sarun UK · Accepted Answer · 2020-10-03 19:21:55Z

1

import React from 'react';

export const Record = props => (
   props?.rows?.drivingInstructions?.length ?
    (<div className='card-container'>
      {props.rows.drivingInstructions.map((val, ind) =>
          <tr>
            <td>{ind + 1}</td>
            <td>Smith</td>
            <td>50</td>
          </tr>
        )}
    </div>) : null;
);

answered Oct 3, 2020 at 19:21

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges

Collectives™ on Stack Overflow

Parsing error: Unexpected token when adding a conditional in react

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related