Tengo un componente que representa el objeto "react-icons". Sin embargo, en algunas situaciones solo quiero pasar texto en lugar de un ícono a este componente.

El componente A es como tal.

Icon.js, componente 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;

Quiero crear otro componente B , que creará un contenedor y repetirá el componente A si se hace clic. No quiero poner el controlador onClick en el componente A , sino en el componente B.

RepeatsonClick.js, componente B

Esto puede parecer un código extraño, pero es algo que traté de implementar. Pero, si hay algo corto y elegante, eso debería estar bien. Pero, estoy buscando una solución basada en funciones.

 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;

El componente Icon devuelve "Icono del corazón", es decir, ♥️.

Cuando el componente B, es decir, RepeatsOnClick , lo envuelve, quiero que genere otro icono de corazón y así sucesivamente hasta que se detenga. ♥️♥️♥️...

Lo que he probado con el componente B no funciona.

¿Cómo resolvemos esto?