Estoy tratando de agregar un enlace en una cadena de un componente, pero tengo problemas de que se muestra como un objeto.

Agrego el enlace productPage como objeto o como componente a mi componente Tooltip.

¿Cómo puedo lograrlo en esta situación?

Aquí está mi base de código:

Información sobre herramientas.js:

 const useStylesBootstrap = makeStyles({ arrow: { color: "#e06a56" }, tooltip: { backgroundColor: "#e06a56", fontSize: 11, width: '180px' } }); function BootstrapTooltip(props) { const classes = useStylesBootstrap(); return <Tooltip arrow classes={classes} {...props} />; } export default function CustomizedTooltips(props) { return ( <BootstrapTooltip title={props.content}>{props.button}</BootstrapTooltip> ); }

Aplicación.js:

 const renderHideOptionalClauseTrigger = () => { const productPage = () => { return ( <Link to="/product"> Product page </Link> ) } return ( <div> <text>My Optional Loan Clause</text> <Tooltip button={ <span> <i className="fas fa-exclamation-circle"></i> </span> } content={ `Will be added verbatim as last clause to the loan agreement. See ${productPage} for other clauses.` } /> </div> ); };

¡Actualizado! Si pongo mi enlace así

 const productPage = <Link className="orange-link" to="/product">Product page</Link>

vendrá Objeto Objeto..