Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

cannot pass props to child component

See original GitHub issue

Hi, I’m trying to implement your mobx-react-form package by myself but I have following issue. I would like to pass props for example form={form.$(‘product’)} defined in NewProductForm.jsx into the component Input defined in Input.jsx.

I checked what I get when I write console.log(props.form) in Input component and it tells me that form.$(‘product’) is empty array and is rendered just this tag <input type="text" />. Probably I’m not passing props correctly but I dont how I can do it in another way.

fields definition in FormFieldConst.jsx

export default {
  fields: {
    product: {
      name: 'productname',
      label: 'productname',
      placeholder: 'write product name',
      rules: 'required|string|between:5,65',
    }
    ....
}

ValidationForm.jsx

const plugins = { dvr: validatorjs };
class ValidateForm extends MobxReactForm {
  onSuccess(form) {
    console.log(form.values());
  }
  onError(form) {
    console.log(form.errors());
  }
}
const validateform = new ValidateForm({ fields, plugins });
export default { validateform };

NewProductForm.jsx

import form from '../components/ValidationForm';

const NewProductForm = () => (
  <form className={styles.newform} onSubmit={form.onSubmit}>
    <Input className="form-input" type="text" form={form.$('product')} />
    <Input className="form-input" type="text" form={form.$('inventory')} />
    <Input className="form-input" type="text" form={form.$('type')} />
    <Input className="form-input" type="text" form={form.$('vendor')} />
    <Button classBtnName="form-button" BtnText="Send Form" />
  </form>
);

export default observer(NewProductForm);

Input.jsx

const Input = props => (
  <div className={props.className}>
    <label htmlFor={props.form.label} >
    </label>
      <input type={props.type} name={props.form.name} value={props.form.name} placeholder={props.form.placeholder} onChange={props.form.sync} />
  </div>
  );