1

I am creating some input fields dynamically in react but once I update the value, it doesn't update in the input field and show the previous value.

const Content = input => {
    const [inputList, setInputList] = useState({}); // it is initialized in other function with some dynamic keys:

        const getFiltersValues = filters => {
              let data = {};
              for (let i = 0; i < filters.length; i++) {
                  data[filters[i]] = [];
              }
              // ... some other processing which stores the data in data object against each key
              let list = {};
              for (const [key, values] of Object.entries(data)) {  
                  list[`${key}a`] = 0;
                  list[`${key}b`] = 0; // key is something like 'data size'
              }
              setInputList(list);
        };
        // setting up value like this:
        const handleChange = (e, field) => {
            const list = inputList;
        list[`${field}a`] = parseInt(e.target.value);
        setInputList(list);
    };
     
     // rendering input fields:
        return (
            <>
                 {filters && filters.length > 0 && (
                                    <div>
                                        {filters.map(f => {
                                            return (
                                                <div>
                                             // correct updated value is shown on the console but its not updated in the 'value' attribute
                                                  {console.log(inputList[`${f.value}a`])}
                                                   <input
                                                   value={inputList[`${f.value}a`] || 0}
                                                   type="number"
                                                   onChange={e => handleChange(e, f.value)}
                                                 />
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                )}
            </>
    );
    
};

Any suggestions/hints where I am getting wrong? Thank you.

8
  • what is the params 'filters, papers' for in function getFiltersValues? what is 'data' inside the function? Commented Dec 26, 2021 at 23:41
  • I made a mistake while copy pasting and making a simplified version. I have updated the code. I hope it clarifies now. Commented Dec 26, 2021 at 23:50
  • I think the problem from value={inputList[${f.value}a] || 0}. the expression 'inputList[${f.value}a] || 0' gonna return a value rather the sate itself. that means the <input> component not bind to any state and won't update based on the state Commented Dec 27, 2021 at 0:04
  • But inputList is already defined in the state. You want to say if value at any index is changed in the inputList, that will not be reflected in the input field due to state issues? Commented Dec 27, 2021 at 0:11
  • 1
    i still think 'value={inputList[${f.value}a] || 0}' is not right. when 'inputList[${f.value}===null' then 'input value===0'. then what value should you use null or 0? so i think better put a initial value to 'inputList[${f.value}a]=0' and keep the value in your state 'value={inputList[${f.value}a]}' Commented Dec 27, 2021 at 10:03

1 Answer 1

1

It was a mistake while updating the object. It should have done in this way:

const handleChange = (e, field) => {
            const list = {...inputList};
        list[`${field}a`] = parseInt(e.target.value);
        setInputList(list);
    };

First copy the inputList to list and then update it and set again.

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

1 Comment

ah yeah right!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.