0

I'm using react clamp https://www.npmjs.com/package/react-clamp which uses clamp.js behind the scenes.

this.props.events.map((event,i) => {
    return <div key={i}>
        <Clamp clamp={2}>The is a really long event name</Clamp>
    </div>
})

This works great if this.props.events is statically set, but these events are fetched asynchronously, and the events get rendered in when they load. For some reason, Clamp does not get reapplied. Could this have something to do with event listeners not getting bound correctly on the 2nd render?

Update Looking through the code, it renders the element with no changes, and doesn't apply clamp until componentDidUpdate is called. When I use clamp on an element that gets it's props statically, componentDidUpdate is called (though I'm not sure why, since I don't see any reason why the element would be getting updated. When the data comes through redux, componentDidUpdate is never called, therefore clamp is not applied. Could this have to do with react-redux implementing componentShouldUpdate?

theUnicycleGuy
  • 145
  • 2
  • 11
  • Have you checked to make sure `this.props.events` is changed within your component? Where does `this.props.events` change? – An Nguyen Aug 23 '17 at 08:31
  • Yes, everything else updates nicely. It's just clamp that doesn't get applied. this.props.events is loaded in a parent component with redux and passed down. – theUnicycleGuy Aug 23 '17 at 08:44

1 Answers1

0

Ended up writing my own component to use clamp.js directly and it works nicely. Triggering clamp.js as soon as the component mounts. There won't be any updates to these components so I didn't implement componentDidUpdate, but I could easily do so.

class Clamp extends Component {

    componentDidMount(){
        if (this.container.length) {
            throw new Error('Please provide exactly one child to clamp');
        }

        clamp(this.container, {
            clamp: this.props.clamp,
            truncationChar: this.props.truncationChar,
            useNativeClamp: this.props.useNativeClamp
        });
    }

    render() {
        return (
            <div ref={(div) => this.container = div}>{this.props.children}</div>
        );
    }
}
theUnicycleGuy
  • 145
  • 2
  • 11