Generate and Download json file from reactjs

Question

Hello I am newly studying React JS

And, I am studying way to download json file from webapp

I try to find solution but I didn't understand..

Converting Object into JSON and downloading as a .json file in React

How do I save a file getting downloaded from server using react?

here is my problem..

I have Constructor like..

 constructor(props) {
    super(props);
    this.state = {

      Json_String: "{'None','none'}, 
      Project_NUM: "None"
    }

   }

and I have a method to get data from Mongo DB and using JSON.stringify to convert data to string type json....

  JsonBuilder() {           
      let {proj} = this.props;

         axios.get(SCongig.proj_Url, { params: {
        GuestID: proj.GuestID,
        Company_ID: proj.Company_ID
        }}, null)
      .then((res)=> {
         this.setState({...this.state,Json_String:  JSON.stringify(res.data[0])});
         this.setState({...this.state,Project_NUM:  proj.Company_ID});

      })

    }

And, I have javeacript part.. which button and download json with click event

  <a download={`TEST_ ${this.state.Project_NUM}.json`}  href={`data:application/json;charset=utf-8;base64,${this.state.Json_String.json}`}> 

   <Button
      shape="circle"
      icon="save"
      style={{border: 'none', background: 'none', width: 15, height: 15, marginLeft: 10}}
      onClick={this.JsonBuilder.bind(this)}       
    />
    </a>

However, I am getting two problems

First, web app is trying to download json file before passing

 this.setState({...this.state,Json_String:  JSON.stringify(res.data[0])});
         this.setState({...this.state,Project_NUM:  proj.Company_ID});

I think, I need to assign json and Project_NUM to constructor, so I can download json file with click button event..

Second, even though, I initialize constructor like "None" webapp is failing to download json file...

I was thinking after I used ".get" then it passes "res" to get data in Object , so I can prepare to download json file.. however, I am not sure why... web is trying to download json file before passing this.setState. Is there anything mistake that I made ? or misunderstood concept of reactjs programming?

Generate and Download json file from reactjs

0 Answers0