How to display xml data using Reactjs

Question

I want to get the input for React JS as XML format instead of json format. So please reply how to display XML in React js .

Answer 1

I would suggest you parse your xml data to a Javascript object. You can the xml2js library to this end.

Answer 2

Too bad you have to use JQuery. Fetch the data and make a placement with jquery.

.then(response => {
            return response.text()
         })
        .then(xml => {
            console.log(xml);
            $("#place_holder").text(xml);})

Answer 3

I know this is an old post, but might help some people. To display XML data, I just use the pre element. If you don't need extra functionalities like collapse/uncollapse nodes, then this should do for you.

<pre className="xml-body">
    {this.props.xmlstr}
</pre>

Then you can just style pre with stripe background...

pre.body {
    width: 100%;
    display: block;
    max-height: 500px;
    overflow: auto;
    margin: 0;
    padding: 0 5px;
    background: #F3F2F2;
    background-image: -webkit-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
    background-image:    -moz-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
    background-image:     -ms-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
    background-image:      -o-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
    background-image:         linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
    background-position: 0 0;
    background-repeat: repeat;
    background-attachment: local;
    background-size: 4em 4em;
    line-height: 2em;
    display: none;
}

Hope this helps someone :)

Answer 4

# By importing xml files #

//webpack setting
    module: {
        loaders: [
          { test: /\.xml$/, loader: 'xml-loader' }
        ]
      }
      //index.js
    import xmlName from 'xml url'   //like './xmlfolder/testxml.xml'

    let anotherVar = Immutable.fromJS(xmlName);
    // Now xml is in 'anotherVar'.