How to get the specific attribute "folder_name" value from XML & store it in an array in React js?

Question

    class LoadXml extends React.Component {
      constructor() {
        super();
        this.state = { total_page: null, menu_array: [] };
      }
    
      componentDidMount() {
        axios
          .get("/xml/menu.xml", {
            "Content-Type": "application/xml; charset=utf-8",
          })
          .then((res) => {
            const jsonDataFromXml = new XMLParser().parseFromString(res.data);
            console.log(jsonDataFromXml);
    
            this.setState({ total_page: jsonDataFromXml.getElementsByTagName("page").length });
            this.setState({ menu_array: jsonDataFromXml.getElementsByTagName("page")[0].getAttribute("folder_name") });
          });
      }
    
      componentDidUpdate() {
        var totalPage = this.state.total_page;
        //localStorage.setItem("TotalPage", totalPage);
        console.log(`Total number of Pages: ${totalPage}`);
      }
    
      render() {
        return (
          <div>
            <h1>Total Pages: {this.state.total_page}</h1>
            <h1>Total Pages: {this.state.menu_array}</h1>
          </div>
        );
      }
    }

folder_name="page1">

I am trying to get the xml data in React JS. In JS I can get the attribute value using getAttribute() but I am not sure how to do that in React. Please guide me.