Passing props breaking the code

[lilyntalmers]

I have a prop(myurl={baseUrl}) in App.js file. And I am trying to pass it to my Formiz form MyForm.js. Inside MyForm.js I have added MyUrl={this.props.myurl} on line 82. But the form is not working.

CodeSandbox.io

I strongly believe I have done something wrong but can't figure out what😅. Would really appreciate if somebody could take a look.

[yoannfleurydev]

Hi @lilyntalmers, 👋

you forgot to put props as a MyForm parameter:

const MyForm = (props) => { // 👈 here
  const myForm = useForm();

also, when using it later, you don't need this as you are in a functional component

<Step1
  form={myForm}
  totalPrice={totalPrice}
  myUrl={props.myurl}
/>

You can also destructure props to get only the myurl variable:

// at the beginning of the component
const { myurl } = props;
// ...
// and then, later on in the return
 <Step1
  form={myForm}
  totalPrice={totalPrice}
  myUrl={myurl}
/>

or directly in the component parameter

const MyForm = ({ myurl }) => { // 👈 here
  const myForm = useForm();

Quick note: avoid the prop MyUrl and prefer myUrl as camelCase is the convention, and not PascalCase.

I hope I helped, please let me know if it is working for you.
Have a nice day. 😊

[lilyntalmers]

It totally worked. Thank you very much @yoannfleurydev.

I used this

// at the beginning of the component
const { myurl } = props;
// ...
// and then, later on in the return
 <Step1
  form={myForm}
  totalPrice={totalPrice}
  myUrl={myurl}
/>

Also I had to pass it here:
const data = { ...values, totalPrice, myurl };

Hope you have a nice day too. 😊