I’m new in react and I want to code a page (in react) that shows data from an external query in php and then, after the user update that data, axios send it to another php page. I can do a page that shows only the fetched data and one that sends data but not one that do everything.
Here’s my code
react page
import React, { Component } from 'react';
import axios from 'axios';
class ClientUpdate extends Component
{
state = {
client: []
}
componentDidMount()
{
const url = 'http://localhost:8888/select_client.php'
axios.get(url).then(response =>
this.setState({ client: response.data }));
}
handleInputChange = (event) =>
{
this.setState({name: event.target.value});
};
handleSubmit = (event) =>
{
event.preventDefault();
axios
.post("http://localhost:8888/update_client.php", formData)
.then((response) =>
{
console.log(response);
})
.catch((error) =>
{
console.log(error);
});
};
render()
{
return (
<div className="container-fluid d-flex justify-content-center">
{this.state.cliente.map((rs, index) => (
<form key={index} className="form-group" onSubmit={this.handleSubmit}>
<h1 className="mt-4 d-flex justify-content-center">UPDATE</h1>
<input type="hidden" className="form-control" name="id_cliente" id="id_cliente" value={rs.Id_cliente} />
<div>
<label htmlFor="username">Username:</label>
<input type="text" className="form-control" name="username" id="username" placeholder={rs.Username} autoComplete="on" value={rs.Username} onChange={this.handleInputChange/ />
</div>
<div>
<label htmlFor="email">Email:</label>
<input type="email" className="form-control" name="email" id="email" placeholder={rs.Email} autoComplete="on" value={rs.Email} onChange={this.handleInputChange} />
</div>
<div>
<label htmlFor="password">Password:</label>
<input type="password" className="form-control" name="password" id="password" autoComplete="off" value={rs.Password} onChange={this.handleInputChange} />
</div>
<button type="submit" className="btn btn-primary btn-lg w-100 mt-3">Submit</button>
</form>
))}
</div>
);
}
}
export default ClientUpdate;
Thanks for your help.