CODEWITHSUNDEEP
reactjstypescriptredux-formreact-props
Mukund Kumar
Mukund Kumar

Reputation: 23191

How to pass props from container component to redux form(component) - react using typescript

I have one Form container component: 

class PersonalDetailContainer extends React.Component<PropTypes> {
  onSubmit = async (fields: PersonalFields) => {
    this.props.savePersonalDetail(fields);
  };

  render(): JSX.Element {
    return (
      <div className="row">
        <div className="col-sm-12 col-md-12">
          <div>
            <PersonalDetail onSubmit={this.onSubmit} id="id" />
             <!-- onSubmit props working fine but id props not working fine
             **error: [ts] Property 'id' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}, Partial<ConfigProps<{}, {}>>>> & ...'.**
            -->
          </div>
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = {
  savePersonalDetail: savePersonalDetail,
};
export default connect(null, mapDispatchToProps)(PersonalDetailContainer);

in Form component:

import * as React from 'react';
import { Field, InjectedFormProps, reduxForm } from 'redux-form';
import { renderInput } from '../../../utils/input-field';

export type PersonalFields = {
  name?: string;

};

interface PersonalProps extends InjectedFormProps {
  id: string;
  onSubmit({ name }: PersonalFields): void;
}

class PersonalDetail extends React.Component<PersonalProps, PersonalFields> {
  state: PersonalFields = {};

  onChangeSetToState = (stateKey: string) => (e: React.FormEvent<HTMLInputElement>) =>
    this.setState({ [stateKey]: e.currentTarget.value.trim() });

  onSubmit = () => {
    this.props.onSubmit(this.state);
  };
  render() {
    return (
      <div className="row">
        <div className="col-sm-12 col-md-12">
          <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
            <Field
              name="name"
              id="name"
              component={renderInput}
              value={this.state.name}
              type="text"
              placeholder="Name"
              onChange={this.onChangeSetToState('name')}
            />
            <div className="loginBtnContainer">
              <button className="btn primaryButton" type="submit">
                Update
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default reduxForm({ form: 'personalForm' })(PersonalDetail);

in container, onSubmit passing properly to child component but id props not passing properly. it's throwing error:

[ts] Property 'id' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes>>> & ...'.

How to solve this error ? Thanks :)

Upvotes: 2

Views: 900

Answers (1)

Sujit.Warrier
Sujit.Warrier

Reputation: 2869

its because your interface personalprops doesnt have an id field defined.

 interface PersonalProps extends InjectedFormProps {
    onSubmit({ name }: PersonalFields): void;
    id:any; 
 }

add this and it will remove the rror

Upvotes: 1

Related Questions