CODEWITHSUNDEEP
javascriptreactjshttp-redirectroutesarguments
Cody
Cody

Reputation: 37

How to redirect to new component with props on submit using React

I'm new to React and Javascript. I have this handleSubmit function that successfully returns the correct values for organizationId and severity upon submit of a Formik form. How can I route, or redirect to the path specified below, with the props/arguments passed to the FilteredReports componenent? In short, I'm filtering a list of items based on these properties. 

export class Report extends Component<IProps, {}> {
  public render() {
    return (
        <Formik
              component={Form}
              initialValues={{ organizationId: '', severity: '' }}
              onSubmit={this.handleSubmit}
        />
    )
  }

private handleSubmit = async (
    values: { organizationId: any, severity: any },
    { setSubmitting }: FormikActions<{ organizationId: any, severity: any}>,
  ) => {
    const { onSubmit } = this.props

    if (onSubmit !== undefined) {
      try {
        setSubmitting(true)
        await onSubmit(values.organizationId, values.severity) 
        return <Redirect to={FILTERED_REPORT} component={FilteredReport({id: values.organizationId, severity: values.severity})} />
      } finally {
        setSubmitting(false)
        }
    }
  }
}

The FilteredReports component looks like this:

export const FilteredReport = ({ id, severity }: { id: string, severity: number }) =>
  loadComponentData(GET_FILTERED_REPORT_ASSETS_AND_EVENTS, { id, severity }, (data) => (
    <ReportScreen items={buildFilteredReportItems(data.reportOrganizations, data.facilities, data.lines, data.assets, data.events)} />
  ))

The values are defined, but onSubmit is undefined for some reason. Also receiving a typeError that onSubmit is not a function. I've tried placing the redirect outside of the try, but I get an invalid hook call. What am I doing wrong?

Edit: my form is defined as so:

export const Form = ({
  handleChange,
  handleSubmit,
  isSubmitting,
  values,
}: FormikProps<{ organizationId: any, severity: any }>) => (
  <form onSubmit={handleSubmit}>

    <Box pt={4}>
      <InputLabel htmlFor="organization-native-required">Organization</InputLabel>
      <Select
          native
          value={values.organizationId}
          onChange={handleChange('organizationId')}
          name="organizationId"
          inputProps={{
            id: 'organization-native-required',
          }}
        >
          <option value='-1'></option>
          {getOrganizations()}
        </Select>
    </Box>

    <Box pt={4}>
      <InputLabel htmlFor="severity-native-required">Severity</InputLabel>
      <Select
          native
          value={values.severity}
          onChange={handleChange('severity')}
          name="severity"
          inputProps={{
            id: 'severity-native-required',
          }}
        >
          <option value='-1'></option>
          <option value='0'>Suspect</option>
          <option value='1'>Warning</option>
          <option value='2'>Critical</option>
        </Select>
    </Box>

    <Box pt={4}>
      <Button
        color="primary"
        data-testid="submit-button"
        disabled={isSubmitting}
        type="submit"
        variant="contained"
      >
        Filter
      </Button>
    </Box>

  </form>
)

Upvotes: 0

Views: 891

Answers (1)

adam tropp
adam tropp

Reputation: 744

The "args" you are talking about are props. In React, props are passed from a parent component to a child component. So, you would pass them through from whatever component renders your FilteredReport component, like this: 

<Parent> 
<FilteredComponent id={whatever} severity={whatver}/>
</Parent>

If you want the component to have default props, you can do check out this link conditionally set default props, but note that you wouldnt normally do this in react. Instead you should consider using state.

Upvotes: 1

Related Questions