My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

How do you compose your React components?

j's photo
j
·Nov 30, 2016

I am curious if you use Protoype inheritance or if you put functions in a namespace and import them in the component ? or do you try to implement OO and go down the multiple inheritance path ?

as an example

I prefer to have the classes in an array

let classList = ['class1', 'class2'];
<component className={classList.join(" ")} />

the next thing I like to do is that everything is a function:

export default class MyComponent extends Component {
    constructor() {
        super()
    }
    className : function() {
        const {classList} = this.props;
        if (classList.length) {
            return classList.join(" ");
        }
    }
    render : function() {
        const {classList, ...props} = this.props;
        return (<div className={this.className()} {...props}></div>);
    }
}

since I want to pass classList as an array to be able to use filter,map,reduce on it.

the way it's built atm is against DRY, I asked a friend (ali sharif) and he's a functional guy so he uses the functional namespace approach so i have a solution per se.

But I wanna know how other people solve the same problem :) so i can choose for the next project :)