Creé un componente de entrada de búsqueda y esta entrada tiene un icono que necesito para cambiar la alineación del icono (en el lado izquierdo o derecho) en función de diferentes situaciones (es un grupo de entrada de arranque), así que todo lo que tengo que hacer es cambiar el orden de elementos dentro de mi div y necesito una forma limpia de hacerlo. Sé que puedo usar una operación ternaria para representar condicionalmente mis elementos, pero esto haría que se repita el código. Estoy buscando una forma mucho más limpia, ¿alguna sugerencia?

 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> ); };