CODEWITHSUNDEEP
javascriptreactjsreact-router
tom harrison
tom harrison

Reputation: 3433

render link tag in react object

I am mapping through my object data in const.js that contains a react-router <Link> within the object but when viewed in the browser it doesn't output it as a react link, instead it outputs it as <link to="/"> instead of an <a href="">.

How can I output my object data and correctly display the <Link> ?

https://www.webpackbin.com/bins/-KkA6XGxeVPedj8apbOA

Hello.js

import React, { Component } from 'react'
import frequentQuestions from './const'
import Freq from './freqQues'

export default class Hello extends Component {

  render() {

    return (
      <div>
      {/* Frequently asked Questions */}
       {frequentQuestions.map(fq =>
        <div key={fq.id}>
         <Freq key={fq.id} question={fq.question} answer={fq.answer} />
        </div>
      )}
  </div>
  )
 }
}

freqQues.js

import React from 'react'
import { Link } from 'react-router'
import './styles.css'

export default class Freq extends React.Component {

  render() {
    return(
    <div >
    <div dangerouslySetInnerHTML={ {__html: this.props.answer } } />
  </div>
  )
 }
}

const.js

const frequentQuestions = [
  { id: 1, 
    question: 'Question1',
    answer: '<Link to="/contact">answer1</Link>' 
  },
  { id: 2,
   question: 'question2',
   answer: 'answer2, bla bla bla <br /><Link to="/blabla"> bla bla </Link> 
   <br />bla bla'
  },
  { id: 3,
    question: 'question3', 
    answer: 'answer3' 
  },
  { id: 4,
    question: 'question4', 
    answer: 'answer4' 
  },
  { id: 5, 
    question: 'question5', 
    answer: 'answer5' 
  },
]

export default frequentQuestions

Upvotes: 0

Views: 17157

Answers (1)

abhilash
abhilash

Reputation: 865

Always try not to use dangerouslySetInnerHTML since it is more like wild innerHTML setting. React does not check for its own validations for this method.Setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack.

Instead, try modifying your code like given below.

const.js

    const frequentQuestions = [
      { id: 1, 
        question: 'Question1',
        answer: {
            to: '/contact',
            linkText: 'answer1'
        }
      },
      { id: 2,
       question: 'question2',
       answer: {
         to: '/blah',
         linkText: 'blahblah'
        }
      }

    ]
export default frequentQuestions

Also for your freqQues.js

// freQues.js    
import React from 'react'
import { Link } from 'react-router-dom'
import './styles.css'

const Freq = ({question, answer})=>(
  <div >
    {question} 
    <Link to={answer.to}>{answer.linkText}</Link>
  </div>
)

export default Freq;

Since Link is a component of react-router-dom You have to wrap your component with the Router component

Main.js

//Main.js
import React from 'react'
import {render} from 'react-dom'
import Hello from './Hello'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const RootComp = () => (
  <Router>
    <Route exact path="/" component={Hello}/>     
  </Router>
)


render(<RootComp />, document.querySelector('#app'));

I have a working example of the above item in https://www.webpackbin.com/bins/-KkAz4y3H_za5ZtmeNHS

Please comment if you need more explanations.

Upvotes: 4

Related Questions