Wiring <Field> from Redux-Form to <CustomInput> from material-ui about ct-material-kit-pro-react

[eleventhaus]

Figured it out for anyone else who might need it

Use CustomInput in the component attribute in the Field component.

import { Field, reduxForm } from "redux-form";

<Field
     name="additional_info"
     component={CustomInput} <----- here
     labelText="Additional Info"
     id="additional_info"
     formControlProps={{
          fullWidth: true
     }}
     inputProps={{
          multiline: true,
          rows: 5
     }}
/>

In CustomInput add input and value to props and then add value={value} and onChange={input.onChange} to component

import Input from "@material-ui/core/Input";

const {
      classes,
      formControlProps,
      labelText,
      id,
      labelProps,
      inputProps,
      error,
      white,
      inputRootCustomClasses,
      success,
      input, <-------------------- here
      value  <-------------------- here
    } = props;

<Input
     classes={{
          input: inputClasses,
          root: marginTop,
          disabled: classes.disabled,
         underline: underlineClasses
     }}
     id={id}
     {...inputProps}
     
        />


return (
    <FormControl {...formControlProps} className={formControlClasses}>
      {labelText !== undefined ? (
        <InputLabel
          className={classes.labelRoot + " " + labelClasses}
          htmlFor={id}
          {...labelProps}
        >
          {labelText}
        </InputLabel>
      ) : null}
      <Input
        classes={{
          input: inputClasses,
          root: marginTop,
          disabled: classes.disabled,
          underline: underlineClasses
        }}
        id={id}
        {...inputProps}
        value={value}  <-------------------- here
        onChange={input.onChange} <-------------------- here
      />
      {error ? (
        <Clear className={classes.feedback + " " + classes.labelRootError} />
      ) : success ? (
        <Check className={classes.feedback + " " + classes.labelRootSuccess} />
      ) : null}
    </FormControl>
  );

[einazare]

Hello there @eleventhaus

I really do not understand your issue.
Why use Field from react-redux instead of our CustomInput?
It doesn't really make sense to me.

Best,
Manu

[eleventhaus]

My app uses Redux for state management. Is there another way to use Redux with CustomInput?

I'd like to use CustomInput for the template styling AND Redux for state management, together. Is that possible?

[einazare]

Hello again, @eleventhaus ,

From what I know, Redux is used for state management.
I do not really see why you would need to work with their input, instead of ours.
You just send the state from Redux to our input as it's value, and you can assign an onChange handler for our CostumInput and that handler should call an action or action creator to your Redux.
But that is just how I would go about it.

Here is my tutorial on Redux: https://medium.freecodecamp.org/how-to-use-redux-in-reactjs-with-real-life-examples-687ab4441b85
And the Youtube one: https://www.youtube.com/watch?v=raKV5Rb8oOM&list=PLWxSJr7LCl87rGlQtTo2PoX8hboUU0R8a

Also, you can find more on the internet.

Hope this information will help you.

Best,
Manu

[eleventhaus]

I do not really see why you would need to work with their input, instead of ours.

I'd like to use both. I would like to use <CustomInput> for styling purposes

You just send the state from Redux to our input as it's value, and you can assign an onChange handler for our CustomInput

Redux-form does this all easily if you wire up their component to an already exists component like <CustomInput>. The problem is I'm having trouble connecting the two