0

I'm recently just using React.js.

Here's my question: I am really confused when I have a form that fetches from API and I want the value can update/type in for a new value.. but suddenly I cannot type but the value is changed e.g the old value is 4 and the new value 5 but in that form is disabled but the value is 45 any solutions for my problems? I'm using useReducer to handle the onChange input here's my code.

Here's my Form Control code

                                        <Col sm={2}>
                                            <FormControl
                                                type="text"
                                                value={dummy.nilai_2 ?? ""}
                                                name={`nilai_${index + 1}`}
                                                ref={element => refs.nilai.current[index] = element}
                                                onChange={(e) => handleChange(e)}
                                                className="text-center"
                                                onBlur={() => console.log('dummy.nilai_2:', dummy.nilai_2, 'stateForm[nilai_${index + 1}]:', stateForm[`nilai_${index + 1}`])}
                                                placeholder="0.0 - 5.0"
                                            />
                                        </Col>

and this my handleChange Function

    const handleChange = (e) => {
        const { name, value } = e.target;

        dispatchForm({
            type: "CHANGE_INPUT",
            payload: {
                name: name,
                value: value
            }
        });
    };

and last here's my useReducer component

export const INITIAL_STATE_FORM = {
    data: []
}

export const formReducer = (state, action) => {
    switch (action.type) {
        case "CHANGE_INPUT":
            return { ...state, [action.payload.name]: action.payload.value };
        case "RESET_INPUT":
            return { ...INITIAL_STATE_FORM};
        default:
            return state;
    }
}

So I want to able type the form and change the value like normally

0 Answers0