Prop does not exist on type 'PropsWithChildren' when trying to dispatch the action using react-redux

user_11031801 0
Viewed 7383

I am getting this error while trying to dispatch the action:

Property 'fetch_feed_loc' does not exist on type 'PropsWithChildren<{ onSubmitForm: any; }>'.

Property 'fetch_feed_loc_srch' does not exist on type 'PropsWithChildren<{ onSubmitForm: any; }>'.

But when I console.log props it is showing me the actions exist as the props.

enter image description here

import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { IonLabel, IonInput, IonIcon, IonItem, IonButton, IonBadge, IonSelect, IonSelectOption } from '@ionic/react';
import {navigateOutline} from 'ionicons/icons';
import { connect } from 'react-redux';
import { fetch_feed_loc, fetch_feed_loc_srch } from '../actions';

const LocationSearch: React.FC<{onSubmitForm: any}> = props => {

    console.log(props);

    const [data, setData] = useState<object>({});

    const initialValues = {
        location: '',
        searchTerm: ''
    }

    const {control, handleSubmit, errors, formState, setValue} = useForm({
        defaultValues: initialValues,
        mode : 'onChange'
    })

    const onSubmit = (data: any) => {
        const submitttedData: any = data;
        setData(submitttedData);
        submitttedData.searchTerm == '' ? props.fetch_feed_loc(submitttedData.location) : props.fetch_feed_loc_srch(submitttedData.location, submitttedData.searchTerm)
    };

    return(
        <div className="ion-padding">
            <form onSubmit={handleSubmit(onSubmit)} >
                <IonItem className="cm-form-field" lines="none">
                    <IonLabel position="floating">Location</IonLabel>
                    <Controller
                        as={IonInput}
                        control={control}
                        onChangeName="onIonChange"
                        onChange={([selected]) => {
                            return selected.detail.value;
                        }}
                        name="location"
                        rules={{
                            required: true,
                        }}
                    />
                    {errors.location ? renderErrorMessage('location'): null }
                </IonItem>
                <IonItem className="cm-form-field" lines="none">
                    <IonLabel position="floating">Search</IonLabel>
                    <Controller
                        as={IonInput}
                        control={control}
                        onChangeName="onIonChange"
                        onChange={([selected]) => {
                            return selected.detail.value;
                        }}
                        name="searchTerm"
                        rules={{
                            minLength: { value: 3, message: "Must be min 3 chars long" }
                        }}
                    />
                </IonItem>
                {errors.searchTerm ? renderErrorMessage('searchTerm'): null }
                <IonButton 
                    expand="block" 
                    shape="round" 
                    size="default"
                    type="submit"
                    disabled={formState.isValid === false}
                >
                    <IonIcon slot="start" icon={navigateOutline}></IonIcon>
                    Submit
                </IonButton>
            </form>
        </div>
    )
}

export default connect(null, { fetch_feed_loc, fetch_feed_loc_srch })(LocationSearch);
react-redux redux typescript reactjs
1 Answers

I don'n know what exactly you keep inside the props but you have to describe it within type or interface. Jus imaging your props keeps two objects: product and user so in this case you need to describe those objects:

    type Props = {
      product: {
        title: string;
            description: string;
            price: number;
            ...
      },
      user: {
         userName: string;
         userEmail: string:
         ...
      }
}

And later you can use this type and destruct your props:

const LocationSearch: React.FC<Props> = ({product, user})=> ...

One more thing, do not use ANY type while using TypeScript, TypeScript is used for types.

user_13062710
Related