I have a component which renders "react-icons" object. However, in some situation I only want to pass text rather than an icon to this component.

The component A is as such.

Icon.js, component A

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

const Icon = ({FaIcon = Faheart}) => {
  return (
    <div>
    {typeof FaIcon === 'string' ? FaIcon : <FaIcon/>}
    </div>
    );
};

export default Icon;

I want create another component B, which will create a container and repeats the component A if clicked. I do not want to put the onClick handle in component A, but component B.

RepeatsonClick.js, component B

This might look like weird code, but something I tried to implement. But, if there something short and elegant that should be fine. But, I am looking for functional based solution.

import React from 'react';
import Icon from './components/icons/icon';

const RepeatsOnClick extends React.Component {

  const [isExit, setIsExit] = useState(false);
  const [count, setCount] = useState([1]);

  const addNewIcon = () => {
    if (!isExit) {
      const lastCount = count[count.length - 1] + 1;
      setCount([...count, lastCount]);
    }
  };

    handleClick(event) {
      event.preventDefault();
      this.setState({
          values: {
              ...this.state.values,
              [Object.keys(this.state.values).length]: '' 
          }
      });
  }
    
    return(
    <div className="container" onClick= handleClick>
      <div>
        {count.map((key) => (
          <Icon FaIcon/>
        ))}
        
        // OR 

        <Icon FaIcon key={key} addNewTextArea={addNewTextArea} />

      </div>
      <button onClick={() => setIsExit(!isExit)}>
        {isExit ? "Restart" : "Stop"}
      </button>
    </div>
      )      
    }   
}
export default RepeatsOnClick;

The Icon component return "Heart Icon" i.e ♥️.

When component B i.e RepeatsOnClick wraps it, I want it to generate another heart icon and so on until it is stopped. ♥️♥️♥️ ...

What I have tried with component B is not working.

How do we resolve this?