How do you compose your React components?
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 :)