I'm trying to create a table that will display the rows of a database called patients and I have created this using Django as the back-end and react as the Front-End. When I try to implement the code I have created thus far the only thing I'm seeing on the webpage is my table header. It should be noted that I have checked sqlite studio and there is data stored in the table. I've checked on PostMan and my Get, POST,PUT, and DELETE methods are all working fine and do what I intend them to do. I'm using Firefox as my browser and I've checked the network tab under inspection, but nothing is being sent to the back-end. I will attach my initial attempt at the front-end webpage
import React, {Component} from 'react'
export class ViewPatients extends Component{
constructor(props){
super(props);
this.state = {
patient: [],
};
}
fetchPatients = () => {
fetch('http://127.0.0.1:8000/patient')
.then(response => response.json())
.then(data=> {
this.setState({patient:data});
})
.catch(error => {
console.error("Error Fetching Patients")
});
};
componentDidMounted(){
this.fetchPatients();
// this.refreshList();
}
render(){
const {
patient
} = this.state;
return(
<div>
<table>
<thead>
<tr>
<th>ssn</th>
<th>address</th>
<th>age</th>
<th>gender</th>
<th>race</th>
<th>
medical history
</th>
<th>occupation</th>
<th>phone number</th>
<th>username</th>
</tr>
</thead>
<tbody>
{patient.map(pat => (
<tr key={pat.ssn}>
<td>{pat.ssn}</td>
<td>{pat.address}</td>
<td>{pat.age}</td>
<td>{pat.gender}</td>
<td>{pat.race}</td>
<td>{pat.medicalHistory}</td>
<td>{pat.occupation}</td>
<td>{pat.phoneNumber}</td>
<td>{pat.username}</td>
<td>{/* Display scheduled vaccines here */}</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
}
I will also provide my model.py for reference
def validate_length(phone):
if not (phone.isdigit() and len(phone) == 10):
raise ValidateError('%(phone)s must be 10 digits', params={'phone':phone})
def IDVarifier(id):
if not (id.isdigit() and len(id) == 9):
raise ValidateError('%(id)s must be 9 digits', params={'id':id})
class Patient(models.Model):
ssn = models.CharField(primary_key = True, max_length = 9)
address = models.CharField(max_length = 50,default = '123 fake st')
age = models.IntegerField(default = 0)
gender = models.CharField(default = 'None', max_length = 6)
race = models.CharField(default = 'None', max_length = 10)
medicalHistory = models.CharField(max_length = 200, default = 'None')
occupationalClass = models.CharField(max_length = 100, default = 'None')
phoneNumber = models.CharField(max_length = 10,validators = [validate_length], default = '1234567890')
username = models.ForeignKey("Credentials",max_length = 10, default = "default", on_delete=models.SET_DEFAULT)
Through a little troubleshooting and banging my head against a wall for over looking this, it appears that I miss typed componentDidMount()
. I had typed componentDidMounted()
. Thank you to @rabbibillclinton for taking the time to look over the post