CODEWITHSUNDEEP
htmlreactjstypescript
Kay
Kay

Reputation: 881

Why useReducer does not update state in react-typescript

I have a problem with Typescript with React and useReducer hook. The state does not wanted to be updated and it is 100% typescript problem (I mean I need a typescript solution because in javascript it works perfect). So I want to make reducer as short as possible so I use "name" in HTML and get this name as a name of object in initialState. When I return ( title:{}, description: {}) It works but when I use [action.field] it does not work. action.field is the name of HTML element.

const initialStateReducer: inputsFormState = {
  title: {
    val: "",
    isValid: false,
  },
  description: {
    val: "",
    isValid: false,
  },
};

const RecipeForm = () => {
  const inputReducer = (
    state: inputsFormState,
    action: inputsFormAction
  ): inputsFormState => {
    console.log(action.type, action.content, action.field);
    let isValid: boolean;
    const { content } = action;
    isValid = content.length > 0;
    return {
      [action.field]: {
        val: content,
        isValid: isValid,
      },
      ...state,
    };
  };
 
  const [formIsValid, setFormIsValid] = useState<boolean>(false);
  const [inputsValues, dispatchReducer] = useReducer(
    inputReducer,
    initialStateReducer
  );

 

 

 

  const changeTextHandler = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    dispatchReducer({
      type: ActionKind.changeVal,
      field: e.target.name,
      content: e.target.value,
    });
  };

 

  return (
    <React.Fragment>
      
              <Input
                name="title"
                onChange={(e) => changeTextHandler(e)}
                placeholder="Name for your recipe"
              />
            
              <Textarea
                name="description"
                onChange={(e) => changeTextHandler(e)}
                placeholder="Description"
                cols={20}
                rows={20}
                resize="none"
              />
             
    </React.Fragment>
  );
};

Upvotes: 0

Views: 100

Answers (1)

MarkusChaos
MarkusChaos

Reputation: 11

Typescript is only a superset of JS that adds on Typing while writing code, it has no effect on the actually running of the JS (as it gets compiled into JS before running). From looking at the above code I think the issue is your return in the reducer:

return {
  [action.field]: {
    val: content,
    isValid: isValid,
  },
  ...state,
};

Should be:

return {
  ...state,
  [action.field]: {
    val: content,
    isValid: isValid,
  }
};

As (and this may not be a great explanation) but right most arguments overwrite the preceding values, so you're effectively overwriting the new with the original.

Upvotes: 1

Related Questions