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.
Source: stackoverflow.com
Related Query
- React - how to render HTML contained into a variable?
- How can I render HTML from another file in a React component?
- How do you reference a process.env variable in HTML <script src="" ? React
- How to render a react element using an html string?
- How to render React Component into itself, in a recursive way
- Reactjs How to insert react component into string and then render
- How to append element to variable to be render in react
- How do I insert a Django template variable into a React script?
- how to import HTML file into React component and use it as a component?
- Insert HTML into user string and render it in React (and avoid XSS threat)
- How to use an ejs variable inside a react render function?
- How to Merge React App into existing Website with existing HTML structure
- Why does react render an array of strings into an HTML element?
- How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?
- How to render variable with HTML elements in ReactJs?
- How to render raw HTML content to React pass via props?
- How to pass graphQL query variable into a decorated react component
- How to call a full html page into a React component
- How do you render HTML tags in React with Coffeescript?
- Draft.js and stateToHTML, how to render output html in react component?
- How to import html file into react as string?
- How render a string as HTML in React
- How to loop inside a react const variable in the render method
- React - How to access variable assigned in componentdidmount in render
- How to render conditional HTML elements in React
- Insert React component into a String variable with html content
- How to Render React to an ID with Hooks on an HTML Page?
- how to pass variable from a function to render function in react
- How to render HTML entity in React without dangerouslySetInnerHTML?
- How to pass a variable with text and a link into a React element
More Query from same tag
- Change state when properties change and first mount on React - Missing function?
- How return a const or function in primary function
- How can I get the value in the parent from a child components(From Inputs)
- React Same Component Communication
- Render before or after child element
- How to create a generic React.FC?
- Custom static route not working
- How to get js-cookies?
- React Hook error when loading Solid webId profile
- React App not redirecting properly on AWS Amplify
- ReactJs using CSS per page
- React - render imported .svg file
- how can i POST data from ant design form into Django Backed?
- react fires events for all items and the item selected
- Calling function once when user starts typing and stops typing
- Retrieve Data data once time Firebase instead of onSnapshot
- preloadedState when injecting asyncReducers
- Error creating contexts in React Typescript
- How to compile React JS code using Craco?
- How can I render a list of search results?
- react-redux TypeError: notes.map is not a function
- Property 'type' is missing in type .but required in type 'Props'
- Checkbox not working within mapping function react js css
- why redux store becomes empty in next js when I navigate from one page to another page?
- Correct syntax to changing state with a form
- Get data from react form to express.js
- Implementing Formik but cannot make the right connection using react
- react hoc in typescript
- Test a create-react-app index.js file
- Why react state (useState) is updated but not updated when log it?