ReactJS displays MySQL seletion query result

1

Hey guys. I want to display my query result on my page AFTER I click submit button of a form. image
My backend works as I tested with POSTMAN.

//selection
app.post('/select', multerParse.none(),(req,res)=>{
    let sql = 'SELECT * FROM users WHERE username = ?'
    db.query(sql, [req.body.username], (err,result)=>{
        console.log(req.body)
        if(err) throw err;
        console.log(JSON.stringify(result))
    })
})

But something wrong with my frontend.

handleSelection = event =>{
  const data = new FormData(event.target)
  fetch('http://localhost:5000/select',{
    method: 'POST',
    body: data
  })
  .then(response=>{
    this.setState({data: response.data})
  })
}

I guess it might be that once I click submit, the page refreshes and my state changes back. Is there a way to display my query result after I click?
I used a third-party Component called JsonToTable to quickly render tables.

<form onSubmit={this.handleSelection} >
      <h2>Select User</h2>
      <br/>
      <input name='username' placeholder='Please enter username' type='text'/>
      <br/>
      <button>Submit</button>
      </form>
      <JsonToTable json={this.state.data}/>
      </div>

Thank you

2

You have a couple of issues.

  1. You are not returning anything from the backend. You should not be getting any of the data back when using Postman. In Postman, you would click on the Body tab of the Response section to see what is getting returned.

  2. You need to disable the default action when the button is clicked and I would recommend using an onClick event on the button instead of an onSubmit event for the form.

  3. You will need another .then before the one that does the setState, because you need to convert the response to JSON. See this challenge for more information about using fetch.