score:1

Accepted answer

you can split the text, and output the split text along with a react component for the anchor:

let phrase = {
  text :  'do you want to search?',
  linktext : 'to search',
  linkurl  : 'http://google.com'
}

function infolink(props) {
  const q = props.phrase;
  const link = <a href={q.linkurl}>{q.linktext}</a>;
  const [part1, part2] = q.text.split(q.linktext);
  return (
    <p>{part1}{link}{part2}</p>
  );
}

reactdom.render(<infolink phrase={phrase}/>, document.getelementbyid('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

score:0

you can split your sentence in 3 parts:

text_before_link <a href={q.linkurl}> text_with_link </a> text_after_link

where...

text_before_link = q.text.substr(0,q.text.indexof(q.linktext));
text_with_link = q.linktext;
text_after_link = q.text.substr(q.text.indexof(q.linktext)+q.linktext.length);

something like that.

score:0

the variable link is a jsx object and you are adding it to an string. so the result will be something like: do you want [object][object]. to solve this problem, you should split the string you want to show and the object and return both.

export default function app (props){
const q = props.phrase;
const link = <a href={q.linkurl}>{q.linktext}</a>;
const text = q.text.split(q.linktext)[0];
return (
    <p>{text}{link}</p>
);}

hope this can help.


Related Query

More Query from same tag