I have a component which renders "react-icons" object. However, if no icon is supplied I want to display "NoIcon" string on the UI.

The component A is as such.

component A

import React from 'react';
import { FaHeart} from "react-icons/fa";

const Icon = ({FaIcon = "NoIcon"}) => {
  return (
    <div>
    <FaIcon/>
    </div>
    );
};

export default Icon;

and calling this component from another components B works :

component B

import React from 'react';
import Icon from './components/icons/icon';
import { FaHeartBroken } from "react-icons/fa";

class App extends React.Component {  
    render(){
        return(
              <Icon FaIcon={ FaHeartBroken }/>
        )      
    }   
}
export default App;

this returns a "Broken Heart Icon" i.e