Find Value of an array of Object with criterias - reactjs

Question

please help a brother i am new to react i have a demo data that i want to render to my homescreen component
i want to update the data based on the filter result i get so if my filter returns an array of 4 objects,only four object should appear on my screen, but my screen is not updating
this is the home screen as well as the filter function
import React, { useEffect, useState } from 'react'
import {
Container,
CardDeck,
Card,
ListGroup,
Button,
Row,
Col,
Form,
} from 'react-bootstrap'
import Customer from '../cards/Customer'
import { data } from '../../Data'
const HomeScreen = () => {
const [gender, setGender] = useState('All')
const [payment, setPayment] = useState('All')
const [peopleArray, setPeopleArray] = useState([])
const filter = () => {
const newData = data.filter((person) => {
if (gender === 'All' && payment === 'All') {
return person
} else if (gender !== 'All' && payment === 'All') {
return person.Gender === gender
} else if (gender === 'All' && payment !== 'All') {
return person.PaymentMethod === payment
} else if (gender !== 'All' && payment !== 'All') {
return person.PaymentMethod === payment && person.Gender === gender
}
setPeopleArray(newData)
})
console.log('new data', newData)
console.log('peopleArray', peopleArray[0])
console.log('gender!', gender)
console.log('payment!', payment)
}
const submitHandler = (e) => {
e.preventDefault()
filter()
}
const setData = () => {
setPeopleArray(data)
console.log('peopleArray', peopleArray[0])
}
useEffect(() => {
console.log('peopleArray!!', peopleArray[0])
console.log('peopleArray first index', peopleArray[0])
console.log('peopleArray second index', peopleArray[2])
console.log('peopleArray first index of firt', peopleArray[0][0])
}, [peopleArray])
return (
<div className='top'>
<Row>
<Col md={9}>
<h1>All Customers</h1>
<Container>
<CardDeck className=' bg-secondary'>
<Customer data={peopleArray[0]} />
</CardDeck>
</Container>
</Col>
<Col md={3} className='fix'>
<div>
<h4>
<strong>Sort by:</strong>
</h4>
<Card>
<Form onSubmit={submitHandler}>
<ListGroup variant='flush'>
<ListGroup.Item>
<Row>
<Col>
<Form.Label>Gender</Form.Label>
</Col>
<Col>
<Form.Group>
<Form.Control
as='select'
value={gender}
onChange={(e) => setGender(e.target.value)}
>
<option>All</option>
<option>Male</option>
<option>Female</option>
<option>Prefer to skip</option>
</Form.Control>
</Form.Group>
</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>
<Form.Label>Payment</Form.Label>
</Col>
<Col>
<Form.Group>
<Form.Control
as='select'
value={payment}
onChange={(e) => setPayment(e.target.value)}
>
<option>All</option>
<option>check</option>
<option>money order</option>
<option>paypal</option>
</Form.Control>
</Form.Group>
</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Button className='btn-block' type='submit'>
Filter
</Button>
</ListGroup.Item>
</ListGroup>
</Form>
</Card>
</div>
</Col>
</Row>
</div>
)
}
export default HomeScreen

Answer 1

You are calling setPeopleArray in array filter method. what you need to do is call it outside array filter method. if any of the condition above it evaluates to true the function would return and your setter would not be called. Here is something you can do. Also array filter expects you to return true or false (true means keep that element false means filter it out).
const filter = () => {
const newData = data.filter((person) => {
if (gender === 'All' && payment === 'All') {
return person
} else if (gender !== 'All' && payment === 'All') {
return person.Gender === gender
} else if (gender === 'All' && payment !== 'All') {
return person.PaymentMethod === payment
} else if (gender !== 'All' && payment !== 'All') {
return person.PaymentMethod === payment && person.Gender === gender
}
})
setPeopleArray(newData)
}