react swipe card failed to compile

Question

Im working on a project where im creating swipe card effect and im getting failed to compile when running npm run start:dev on the app

import React from 'react';
import Cards, { Card } from 'react-swipe-card'


const data = ['Alexandre', 'Thomas', 'Lucien']

const SwipeCard = () => (
  return (
      <Cards onEnd={action('end')} className='master-root'>
        {data.map(item => 
          <Card 
            onSwipeLeft={action('swipe left')} 
            onSwipeRight={action('swipe right')}>
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
);

export default SwipeCard;

<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>

Doc can be found here

are you transpiling your code ? If yes, please attached babelrc, package.json and your build tool file — Pranay Tripathi, Nov 16 '18 at 18:00

score 0 · Accepted Answer · answered Nov 16 '18 at 18:18

0

You are using an arrow function without a body for your SwipeCard component which has an implicit return, so you can just remove the return statement.

const SwipeCard = () => (
  <Cards onEnd={action("end")} className="master-root">
    {data.map(item => (
      <Card
        key={item}
        onSwipeLeft={action("swipe left")}
        onSwipeRight={action("swipe right")}
      >
        <h2>{item}</h2>
      </Card>
    ))}
  </Cards>
);

answered Nov 16 '18 at 18:18

Tholle

108,070
19
198
189

i did that and now im getting `Uncaught ReferenceError: action is not defined error` – Nov 16 '18 at 20:00
@toymoy Where does `action` come from in your code. You most likely have to define or import it from somewhere. – Tholle Nov 16 '18 at 20:02
if you see on the second line `` action is called. I did not change anything. its the same code as the documentaion – Nov 16 '18 at 20:05
@toymoy Yes, I an see `action` in your code. but where do you get it from? It is not imported or initialized anywhere. It is not defined, like your error says. – Tholle Nov 16 '18 at 20:06
i see what you mean. i havent defined action function and not sure how i should do that either as it is not mentioned on the documentation. – Nov 16 '18 at 20:17
any suggestions on that – Nov 16 '18 at 20:17
@toymoy I think it's just an example. You could write `onSwipeLeft={() => console.log("swipe left")}` as a first test and go from there if you need some extra logic when the user swipes. – Tholle Nov 16 '18 at 20:19
i made `action` function with console.log(value) and takes value as argument. this time im getting `Each child in an array or iterator should have a unique "key" prop.` – Nov 16 '18 at 20:28
@toymoy Look at the `key` prop in my answer. [This is a good read on the subject](https://reactjs.org/docs/lists-and-keys.html). – Tholle Nov 16 '18 at 20:30
im so thankful for your help. It is still not working tho. is there any resource u would point out to me to get this running. – Nov 16 '18 at 22:00
this time im getting `Uncaught TypeError: Cannot read property 'offsetWidth' of null` – Nov 16 '18 at 22:01
@toymoy You're welcome! I'm not sure what might be wrong. [It only seems to work in React 15 in my port of the example](https://codesandbox.io/s/yprp40vj3x). – Tholle Nov 16 '18 at 22:21

score 0 · Answer 2 · answered Nov 16 '18 at 18:23

As mentioned by @Tholle you can simply remove the return statement. Alternatively you can change the outer ( and ) to { and } as shown below to imply a function. I generally do this to have a consistent format across all my arrow functions.

import React from 'react';
import Cards, { Card } from 'react-swipe-card'


const data = ['Alexandre', 'Thomas', 'Lucien']

const SwipeCard = () => {
  return (
      <Cards onEnd={action('end')} className='master-root'>
        {data.map(item => 
          <Card 
            onSwipeLeft={action('swipe left')} 
            onSwipeRight={action('swipe right')}>
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
};

export default SwipeCard;

i did that and now im getting Uncaught ReferenceError: action is not defined error — , Nov 16 '18 at 20:00

react swipe card failed to compile

2 Answers2