reactjs - Find Value of an array of Object with criterias

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

question from:https://stackoverflow.com/questions/65871085/find-value-of-an-array-of-object-with-criterias

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)
}