Utilizing ReactJs and react-fa to access Font Awesome icons, I am attempting to dynamically place one of the icons inside a text input.
The following is my code snippet:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'react-fa';
import '../index.css';
class SearchInput extends Component {
static propTypes = {
onKeyUp: PropTypes.object,
placeholder: PropTypes.placeholder,
iconName: PropTypes.string
};
handleKeyUp = (content) => {
console.log(content);
}
render() {
let icon = <Icon name={this.props.iconName} />;
let extra = {
backgroundImage: icon
}
return (
<input className='ux-search-input' style={extra} type='text' onKeyUp={this.handleKeyUp} placeholder={this.props.placeholder} />
);
}
};
export default SearchInput;
The icons are not appearing as expected. This is because the icon variable is a ReactJs component and not a URL to match.