I have a component that receives a parameter.
I use that parameter to compare and filter out only those elements that are equal to the value of the parameter.
but when I use the filter function it gives an empty array.
What am I doing wrong here?
Edit
In the filter function if i use parseInt(this.props.match.params) it works..
but doesn't work if i use parseInt(this.state.registrationId) any ideas..
import React, {Component} from "react";
import {Link} from 'react-router-dom';
import Progress from "../Common/Progress";
class AdmissionProcess extends Component {
state = {
progress: true,
enquiries: [],
registrationId: this.props.match.params.reg_status
}
componentDidMount = () => {
this.loadData()
}
componentDidUpdate = (prevProps) => {
if(prevProps.match.params.reg_status !== this.props.match.params.reg_status) {
this.setState({registrationId: this.props.match.params.reg_status})
console.log("I ran")
}
}
loadData () {
const url = window.domain+"/list-enquiry";
fetch(url)
.then(res => res.json())
.then(result => this.setState({enquiries: [...result], progress: false}))
.catch(err => console.log("err"+ " " +err))
}
checkEnquiries = () => {
const reg2 = this.state.enquiries.filter(enq => enq.registrationId===this.state.registrationId)
console.log(reg2)
}
render() {
this.checkEnquiries()
return(
{/* Jsx code here*/}
)
}
export default AdmissionProcess
note that your loadData() crush the initial state, try this code :
loadData () {
const url = window.domain+"/list-enquiry";
fetch(url)
.then(res => res.json())
.then(result => this.setState({...this.state, enquiries: [...result], progress: false}))
.catch(err => console.log("err"+ " " +err))
}
checkEnquiries = () => {
const reg2 = this.state.enquiries.filter(enq => enq.registrationId===parseInt(this.state.registrationId))
console.log(reg2)
}
Okay after several hit and trials i managed to get it work ... I'll be honest i still don't know exactly how it works and i would really appreciate some explanation on how this works and others don't... Here's the code with changes...
import React, {Component} from "react";
import {Link} from 'react-router-dom';
import Progress from "../Common/Progress";
class AdmissionProcess extends Component {
state = {
progress: true,
enquiries: [],
registrationId: this.props.match.params.reg_status,
requiredList: []
}
componentDidMount = () => {
this.loadData()
}
loadData () {
const url = window.domain+"/list-enquiry";
fetch(url)
.then(res => res.json())
.then(result => this.setState({enquiries: [...result], progress: false}, this.checkEnquiries))
.catch(err => console.log("err"+ " " +err))
}
componentDidUpdate = (prevProps) => {
if(prevProps.match.params.reg_status !== this.props.match.params.reg_status) {
this.setState({registrationId: this.props.match.params.reg_status}, this.checkEnquiries)
console.log("I ran")
}
}
checkEnquiries = () => {
const reg2 = this.state.enquiries.filter((enq) => enq.registrationId === parseInt(this.state.registrationId))
this.setState({requiredList: [...reg2]})
}
render() {
return ({/*JSX Code Here*/})
}
}
export default AdmissionProcess