I am experimenting with building a proof-of-concept people search app using React, and I liked the format that the DataView component provided, so I decided to attempt to mimic it with my own data. I used relevant parts of the example code provided from the DataView page in my own project. The results come up fine minus the styling, but that's a concern for after I get the functionality established. However when I type a value in to filter, nothing happens. The table doesn't refresh and I receive no errors in the console.
I have provided my code below, along with a separate sampling of the data from the JSON file that I'm reading (which contains a total of 500 users). The data from the JSON file was randomized sample information I found online, and I'm using the json-server package to simulate a data source server for the time being.
In my code I'm attempting to start with a simple use case of filtering by the first_name field before attempting to add additional fields that I would like to search by such as last_name and full_name. I created the function named testFunction to console.log the values of this.dv for troubleshooting purposes. In it, I can see that it contains a value for filtering the results, and that it is returning a new array down to the exact match if I type it out (E.x. Sage). Using the React developer tools, totalRecords remains at -1 in my app, whereas the Vehicle example updates this number once a value has been filtered. I have since restored the code to what was provided by the example, but wanted to leave testFunction in there for reference purposes as I made this post.
I'm confused as to why I don't see the filter behavior reflected in my UI as it is for the Vehicle example, especially since I am re-using as much of the code from the example as I could. I'm newer to JavaScript and React so there is a lot that I am learning as a part of this process. As a result, it's possible that I have a misunderstanding of how the filtering functionality of the DataView component works.
Thank you for reading as I know there is a lot of detail here, however I wanted to cover all of the bases as best as I could. Please let me know if there is any additional information I can provide.
MY CODE:
Code: Select all
import React, { Component } from 'react'
import axios from 'axios'
import {DataView, DataViewLayoutOptions} from 'primereact/components/dataview/DataView';
import { InputText } from 'primereact/components/inputtext/InputText'
import picture from '../images/default3.jpg'
class Search extends Component {
state = {
people: []
}
componentDidMount() {
axios.get('http://localhost:3000/users')
.then((response) => {
for (let key in response.data) {
response.data[key].full_name = `${response.data[key].first_name} ${response.data[key].last_name}`
}
this.setState({ people: response.data });
})
}
itemTemplate = (person, layout) => {
if(layout === 'list') {
return (
<div className="ui-g" style={{padding: '2em', borderBottom: '1px solid #d9d9d9'}}>
<div className="ui-g-12 ui-md-3">
<img src={picture} alt={person.full_name} />
</div>
<div className="ui-g-12 ui-md-8 car-details">
<div className="ui-g">
<div className="ui-g-2 ui-sm-6">Name:</div>
<div className="ui-g-10 ui-sm-6">{person.full_name}</div>
<div className="ui-g-2 ui-sm-6">Phone:</div>
<div className="ui-g-10 ui-sm-6">{person.phone1}</div>
<div className="ui-g-2 ui-sm-6">Email:</div>
<div className="ui-g-10 ui-sm-6">{person.email}</div>
</div>
</div>
</div>
)
}
}
testFunction = (value) => {
console.log('[this.dv]: ' , this.dv)
console.log('[dv.filter]: ', this.dv.filter(value))
}
render() {
let header = <div className="ui-g-6 ui-md-4 filter-container">
<div style={{position:'relative'}}>
<InputText placeholder="Search by Name" onKeyUp={e=>this.dv.filter(e.target.value)}/>
</div>
</div>
return (
<div>
<h1>People Search</h1>
<DataView ref={(el) => { this.dv = el; }} value={this.state.people} itemTemplate={this.itemTemplate.bind(this)} filterBy={"first_name"} header={header} lazy={false} />
</div>
)
}
}
export default Search;
Code: Select all
{
"users": [
{
"id": 1,
"first_name": "John",
"last_name": "Johnson",
"company_name": "Benton, John B Jr",
"address": "6649 N Blue Gum St",
"city": "New Orleans",
"county": "Orleans",
"state": "LA",
"zip": 70116,
"phone1": "504-621-8927",
"phone2": "504-845-1427",
"email": "jbutt@gmail.com",
"web": "http://www.bentonjohnbjr.com"
},
{
"id": 2,
"first_name": "Josephine",
"last_name": "Darakjy",
"company_name": "Chanay, Jeffrey A Esq",
"address": "4 B Blue Ridge Blvd",
"city": "Brighton",
"county": "Livingston",
"state": "MI",
"zip": 48116,
"phone1": "810-292-9388",
"phone2": "810-374-9840",
"email": "josephine_darakjy@darakjy.org",
"web": "http://www.chanayjeffreyaesq.com"
},
{
"id": 3,
"first_name": "Art",
"last_name": "Venre",
"company_name": "Chemel, James L Cpa",
"address": "8 W Cerritos Ave #54",
"city": "Bridgeport",
"county": "Gloucester",
"state": "NJ",
"zip": 8014,
"phone1": "856-636-8749",
"phone2": "856-264-4130",
"email": "art@venere.org",
"web": "http://www.chemeljameslcpa.com"
},
{
"id": 4,
"first_name": "Lenna",
"last_name": "Paprocki",
"company_name": "Feltz Printing Service",
"address": "639 Main St",
"city": "Anchorage",
"county": "Anchorage",
"state": "AK",
"zip": 99501,
"phone1": "907-385-4412",
"phone2": "907-921-2010",
"email": "lpaprocki@hotmail.com",
"web": "http://www.feltzprintingservice.com"
},
{
"id": 5,
"first_name": "Donette",
"last_name": "Foller",
"company_name": "Printing Dimensions",
"address": "34 Center St",
"city": "Hamilton",
"county": "Butler",
"state": "OH",
"zip": 45011,
"phone1": "513-570-1893",
"phone2": "513-549-4561",
"email": "donette.foller@cox.net",
"web": "http://www.printingdimensions.com"
},
{
"id": 6,
"first_name": "Simona",
"last_name": "Morasca",
"company_name": "Chapman, Ross E Esq",
"address": "3 Mcauley Dr",
"city": "Ashland",
"county": "Ashland",
"state": "OH",
"zip": 44805,
"phone1": "419-503-2484",
"phone2": "419-800-6759",
"email": "simona@morasca.com",
"web": "http://www.chapmanrosseesq.com"
},
{
"id": 7,
"first_name": "Bob",
"last_name": "Smith",
"company_name": "Morlong Associates",
"address": "7 Eads St",
"city": "Chicago",
"county": "Cook",
"state": "IL",
"zip": 60632,
"phone1": "773-573-6914",
"phone2": "773-924-8565",
"email": "mitsue_tollner@yahoo.com",
"web": "http://www.morlongassociates.com"
},
{
"id": 8,
"first_name": "Leota",
"last_name": "Dilliard",
"company_name": "Commercial Press",
"address": "7 W Jackson Blvd",
"city": "San Jose",
"county": "Santa Clara",
"state": "CA",
"zip": 95111,
"phone1": "408-752-3500",
"phone2": "408-813-1105",
"email": "leota@hotmail.com",
"web": "http://www.commercialpress.com"
},
{
"id": 9,
"first_name": "Sage",
"last_name": "Wieser",
"company_name": "Truhlar And Truhlar Attys",
"address": "5 Boston Ave #88",
"city": "Sioux Falls",
"county": "Minnehaha",
"state": "SD",
"zip": 57105,
"phone1": "605-414-2147",
"phone2": "605-794-4895",
"email": "sage_wieser@cox.net",
"web": "http://www.truhlarandtruhlarattys.com"
},
{
"id": 10,
"first_name": "Kris",
"last_name": "Marrier",
"company_name": "King, Christopher A Esq",
"address": "228 Runamuck Pl #2808",
"city": "Baltimore",
"county": "Baltimore City",
"state": "MD",
"zip": 21224,
"phone1": "410-655-8723",
"phone2": "410-804-4694",
"email": "kris@gmail.com",
"web": "http://www.kingchristopheraesq.com"
}
]
}