I am trying to build a form-wizard. I set up the wizard via react-router and used formik for the forms. Now I ran into a problem while creating a customizable radio-button. I used the react-custom-radio library for that.

When I use the radio-buttons outside of the routes, it is working as it should (code at the bottom of the post).

When I use the with the router, the props are passed down to the child ponent:

<Route path="/form/location" render={(props) => (<Pricing {...props} />)} />

Inside the child ponent, I access the props the same way, as I did it in the parent, where it worked.

const Pricing = (props) => {
  const {
    values,
    touched,
    errors,
    setFieldValue,
    setFieldTouched,
  } = props;
  return (
    <div>
        <MyRadio
          value={values.car}
          onChange={setFieldValue}
          onBlur={setFieldTouched}
          error={errors.car}
          touched={touched.car}
        />
    </div>
  );
}

But now I always get the error Cannot read property 'car' of undefined. Why doesn't it work if there's a router in between?

If I do it like that, it works:

  <Form>
    <Switch>
      <Redirect from="/" exact to="/form/location" />
       <Route path="/form/location" render={(props) => (<Pricing {...props} />)} />
    </Switch>
  <MyRadio
      value={values.car}
      onChange={setFieldValue}
      onBlur={setFieldTouched}
      error={errors.car}
      touched={touched.car}
    />
  </Form>

I am trying to build a form-wizard. I set up the wizard via react-router and used formik for the forms. Now I ran into a problem while creating a customizable radio-button. I used the react-custom-radio library for that.

When I use the radio-buttons outside of the routes, it is working as it should (code at the bottom of the post).

When I use the with the router, the props are passed down to the child ponent:

<Route path="/form/location" render={(props) => (<Pricing {...props} />)} />

Inside the child ponent, I access the props the same way, as I did it in the parent, where it worked.

const Pricing = (props) => {
  const {
    values,
    touched,
    errors,
    setFieldValue,
    setFieldTouched,
  } = props;
  return (
    <div>
        <MyRadio
          value={values.car}
          onChange={setFieldValue}
          onBlur={setFieldTouched}
          error={errors.car}
          touched={touched.car}
        />
    </div>
  );
}

But now I always get the error Cannot read property 'car' of undefined. Why doesn't it work if there's a router in between?

If I do it like that, it works:

  <Form>
    <Switch>
      <Redirect from="/" exact to="/form/location" />
       <Route path="/form/location" render={(props) => (<Pricing {...props} />)} />
    </Switch>
  <MyRadio
      value={values.car}
      onChange={setFieldValue}
      onBlur={setFieldTouched}
      error={errors.car}
      touched={touched.car}
    />
  </Form>

• javascript
• reactjs
• react-router
• wizard
• formik

• What happens if you use the props of the parent instead, and ignore using the props from the render function? () => (<Pricing {...props} />) – Tholle Commented Jun 27, 2018 at 9:06
• Cool, it seems to work, but I don't really get what it did. Is this some parable way of saying this.props? – Fabio ha Commented Jun 27, 2018 at 9:10

2 Answers 2

The props given to the render function are the route props listed in the documentation. What you want to do in this case is to pass down the props from the parent ponent, not the route props:

class ParentComponent extends React.Component {
  render() {
    const { props } = this;
    const {
      values,
      touched,
      errors,
      setFieldValue,
      setFieldTouched,
    } = props;
    return (
      <Form>
        <Switch>
          <Redirect from="/" exact to="/form/location" />
          <Route
            path="/form/location"
            render={() => <Pricing {...props} />}
          />
        </Switch>
        <MyRadio
          value={values.car}
          onChange={setFieldValue}
          onBlur={setFieldTouched}
          error={errors.car}
          touched={touched.car}
        />
      </Form>
    );
  }
}

And if you need both Formik's props and this ponent's you could do: render={(formikProps) => <Pricing {...formikProps}, {...props} />} That will create a long list of attributes from both props for Pricing to use.