I created a search input component and this input has an icon which I need to change the icon's align (on the left side or right side) based on different situations (it's a bootstrap input-group) so all I need to do is change the order of elements inside my div and I need a clean way to do this. I know I can use a ternary operation to conditional render my elements but this would cause to repeat the code. I'm looking for much cleaner way so any suggestions?
const SearchInput = ({onClose, onChangeValue, ...restProps}) => {
return (
<div className='input-group'>
<button className='btn' type='button'> //right now its on left side...
<i className='bi bi-search'></i>
</button>
<Input placeholder='Search here...' onChangeValue={onChangeValue} {...restProps} />
{onClose && <i className='bi bi-x' onClick={onClose}></i>}
</div>
);
};
My proposal
import clsx from 'clsx';
const SearchInput = ({onClose, onChangeValue, conditionProp, ...restProps}) => {
return (
<div className={clsx('input-group', conditionProp && 'my-order)}>
<button className='btn' type='button'> //right now its on left side...
<i className='bi bi-search'></i>
</button>
<Input placeholder='Search here...' onChangeValue={onChangeValue} {...restProps} />
{onClose && <i className='bi bi-x' onClick={onClose}></i>}
</div>
);
};
In CSS
.my-order {
flex-direction: row-reverse;
}
I like cslsx for conditional classnames, but of course I can do without it - conditionProp ? 'input-group my-order' : 'input-group'