React updating nested arrayelement via setState

Question

I'm trying to set state of input fields.

I want to update specific input value when a key is pressed.

setState state looks fine, but I'm getting error on map function of render part. (this.state.form[this.state.mode].form.map)

I don't understand why it breaks on map.

export type IMode = "login" | "forgot";
export interface IInput {
    value: string;
    error: string;
    id: string;
    name: string;
    placeholder: string;
    type: "text" | "password";
}
export interface IState {
    isRequestPending: boolean;
    backendError: string;
    mode: IMode;
    form: {
        [key in IMode]: {
            name: string;
            method: string;
            action: string;
            fields: IInput[];
        };
    };
}

in constructor 
       this.state = {
            isRequestPending: false,
            backendError: "",
            mode: "login",
            form: {
                login: {
                    name: "Login",
                    method: "",
                    action: "",
                    fields: [
                        {
                            value: "",
                            error: "",
                            id: "test",
                            placeholder: "Login",
                            type: "text",
                            name: "login"
                        }
                    ]
                },
                .... and so on

            }
        };
    private handleFormInput = (e, input: IInput, index) => {

        this.setState((prevState) => ({
            ...prevState,
            backendError: "",
            form: {
                ...prevState.form,
                [this.state.mode]: {
                    ...prevState.form[this.state.mode],
                       fields: {
                            ...prevState.form[this.state.mode].fields,
                           [index]: {
                                ...prevState.form[this.state.mode].fields[index],
                                value: "it Works, but map crash"
                           }
                       }
                }
            }
}

Dupocas · Accepted Answer · 2019-11-28 17:20:14Z

1

You are converting fields into an object which doesn't contain a map method. Update your state like this

this.setState(prev =>({
   /*...*/
   fields : prev.form[this.state.mode].fields.map((field, i) =>{
       if(i !== index) return field
       return {
           ...field,
           value : 'foo'
       }
   })
}))

edited Nov 28, 2019 at 17:20

answered Nov 28, 2019 at 17:11

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React updating nested arrayelement via setState

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related