TypeError: Cannot read property 'offsetWidth' of null

[generalpaulinski]

I get an Uncaught TypeError: Cannot read property 'offsetWidth' of null. The size of the cards is set, also the divs size and the body size. What can i do to fix it?

[atoulous]

Maybe you should share your code with us to help us to understand your problem, we cannot guess there

[rassenia]

faced same issue.

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Cards, { Card } from 'react-swipe-card'
import '../../styles/common/cards/cards.css';

class Home extends Component {
    action(name) {
        console.log(name);
    }

    render() {
        let {names} = this.props.homeState;
        return (
            <div className="b-content">
                <Cards onEnd={()=>{this.action('end')}} className='master-root'>
                    {names.map((item, i) =>
                        <Card key={i}
                            onSwipeLeft={()=>{this.action('swipe left')}}
                            onSwipeRight={()=>{this.action('swipe right')}}>
                            <h2>{item}</h2>
                        </Card>
                    )}
                </Cards>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        homeState: state.homeState
    };
}

function matchDispatchToProps(dispatcher) {
    return bindActionCreators({}, dispatcher);
}

export default connect(mapStateToProps, matchDispatchToProps)(Home);

Error log: http://prntscr.com/hjtq92

[atoulous]

Are width and height of Cards and Card components set ?

[rassenia]

Hello,

yes. I'm using your css styles

http://prntscr.com/hkze53

2017-12-08 18:41 GMT+03:00 Aymeric Toulouse notifications@github.com:

Are width and height of Cards and Card components set ?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/alexandre-garrec/react-swipe-card/issues/17#issuecomment-350294565, or mute the thread https://github.com/notifications/unsubscribe-auth/AC7sCg6Wi35_fbTcVT_g2CMyK1whh_Thks5s-Vi-gaJpZM4Q2CpE .

[jksyrek]

@generalpaulinski I have the same problem. Have you found a solution?

[generalpaulinski]

@jksyrek sadly not :( but will let you know if I find anything...

[atoulous]

I think that I had this problem in the beginning and I quickly resolved it but I dont know how, sorry, and I can't reproduce it either, keep hope 😆

[therepo90]

I solved this issue. Make react and react-dom version 15.4.2 Make your functional component ES6 class Copy style.css from stories directory

[rassenia]

therepo90, thanks! Your solution works fine.

[generalpaulinski]

thanks! works for me too :)

[leonardmaguin]

I tried @therepo90 solution but can't make it work.

Here is my code :

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

export default class SwipePage extends Component {

  render() {
        const data = ['Alexandre', 'Thomas', 'Lucien']
return(
      <div>
      <Cards onEnd={action('end')} className='master-root'>
        {data.map(item => 
          <Card 
            onSwipeLeft={action('swipe left')} 
            onSwipeRight={action('swipe right')}>
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
      </div>
      )
}

export function action(action) {
    // body...
    return 1;
}

• react and react-dom both are version "^16.8.4"
• I'm not sure what you mean by "Make your functional component ES6 class"
• I tried to copy all the style.css into my file main.css. It messed up with my other images style and didn't fix the 'offsetWidth' issue.

Do you know what I'm doing wrong ?

Thanks a lot in advance for your kind reply :)