CODEWITHSUNDEEP
reactjs
Snip
Snip

Reputation: 31

Getting TypeError: props.search is not a function

TypeError: props.search is not a function

I'm very new to React and I'm trying to create a 'filter' button, on click it should show a popup with filter element fields. Out of all the fields, only one is a required field - ReqTitle. After populating ReqTitle, when I click on 'search' button, it throws an error - props.search is not a function

Parent code snippet:

<React.Fragment>
          <Button 
                  edge="end"
                  variant="contained"
                  color="primary" {...bindTrigger(popupState)}>
                  ☰ Filter 
          </Button>
          <Menu {...bindMenu(popupState)}>
           <Filters >  </Filters>
          </Menu>
</React.Fragment>

Child Code snippet:

  function data() {
    if (!Object.values(inputErrors).some(x => x)) {
      if (!Object.values(filterValues).some((x) => (x && !Array.isArray(x)) || (x && x.length > 0))) {
        setFieldRequired(true);
      } 
      else if ((filterValues.startDate && !filterValues.endDate) || (!filterValues.startDate && filterValues.endDate)) {
        setNeedBothDates(true);
      }
      else {
        props.search(filterValues);
      }
    }
  }

I have also appended at the end (and wonder if this is causing the issue) :

Filters.propTypes = {
  search: PropTypes.func.isRequired,
};

Function declaration:

export default function Filters(props) {
  const [filterValues, setFilterValues] = useState({
    sDate: null,
    eDate: null,
    ReqTitle: "",
    eTitle: "",
    channels: [],
    countries: [],
    genres: []
  });

I'm also seeing a warning which states : The prop search is marked as required in Filters, but its value is undefined

Upvotes: 2

Views: 1250

Answers (1)

Damodar Hegde
Damodar Hegde

Reputation: 468

You are not passing any prop by the name search to <Filters /> component. Also, you have added prop type validation to your component which in essence means that the component Filters requires a mandatory search prop. Pass it like

<Filters
   search = {/*value to be passed*/}
/>

Upvotes: 2

Related Questions