I have two React components. The only difference is the input tag vs select tag. I'm trying to move the bulk of the duplicate code to a higher order component but I can't wrap my head around it. Any suggestions?
import React from "react";
import Style from "./style.scss";
export class FloatingLabelInput extends React.Component {
render() {
const { label, ...props } = this.props;
const clsOK = props.value ? Style.ok : "";
return (
<div className={`${Style.wrapper}`}>
<input className={`${Style.input} ${clsOK}`} ref={el => this.input = el} {...props} />
<label className={`${Style.label}`} htmlFor={props.id}>{label}</label>
</div>
);
}
}
export class FloatingLabelDropDown extends React.Component {
render() {
const { label, ...props } = this.props;
const clsOK = props.value ? Style.ok : "";
return (
<div className={`${Style.wrapper}`}>
<select
className={`${Style.input} ${clsOK}`}
ref={el => this.input = el} {...props} >
{this.props.children}
</select>
<label className={`${Style.label}`} htmlFor={props.id}>{label}</label>
</div>
);
}
}