How to update the state element properly in react js?

Question

import React, { useState } from "react";
import Form from "./child/form.js";
import Details from "./child/details.js";

function App() {
const [inp, modifyInp] = useState([]);
const inputHandler = (input) => {
modifyInp((prevState) => [{ ...prevState, ...input }]);
};
console.log(inp);
return (
<div>
<Form inpHandler={inputHandler} />
<Details inputt={inp} />
</div>
);
}
export default App;

I am trying to update state of inp here, but it is not updating properly and insted the value is being replaced. Can anyone help me with this?`

remix23 · Accepted Answer · 2023-10-10 22:05:36Z

2

Your problem seems to be here: modifyInp((prevState) => [{ ...prevState, ...input }]); here prevState is in fact what you call inp, it is supposed to be an array so if your intent is to append the input to inp your are not using the spread syntax properly.

Here you are spreading prevstate into an object, then you spread input in the same object and put the result into the first element of an array and return it as the new inp.

It doesn't make sense.

either inp is indeed an array and you should do this to append input to this array:

// if input is a single element:
modifyInp((prevState) => [...prevState, input ]);

// if input is itself an array and you want to append all of its elements:
modifyInp((prevState) => [...prevState, ...input ]);

Or inp is an object and input too and you want to merge input into inp:

modifyInp((prevState) => ({ ...prevState, ...input }));

edited Oct 10, 2023 at 22:05

answered Oct 2, 2023 at 22:28

remix23

3,1722 gold badges13 silver badges26 bronze badges

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

5 Comments

Derek Over a year ago

nitpick: you mean spread here, not destructure

remix23 Over a year ago

I couldnt remember the word thanks :)

Drew Reese Over a year ago

Further nitpick, "spread" isn't an operator, it's a syntax.

remix23 Over a year ago

Respectfully in my opinion it is both. Any language being the set of syntaxes it recognizes, each being sequences of tokens, which in case of programming languages usually fall into 3 main categories: identifiers, delimiters and operators. The spread syntax requires all of them and if one would have to give the ... token a name in a spread syntax, I think it's ok to call it the spread operator.

remix23 Over a year ago

...And that's why I tend to forget the three different names for something that is cognitively the same thing to me :P (only the "direction" of the data changes) Fixing the answer anyway....

Tony Ngomana · Accepted Answer · 2023-10-02 23:12:47Z

0

The above answer is correct and there's another way of writing your function:

const inputHandler = (event) => {
   //This is what I like to do most of the times.
   
   const value = event.target.value;
   modifyInp(value);
};

Explanation: It takes an event as a parameter, typically from an input field in a web application. Inside the function, it extracts the value entered into the input field using event.target.value and assigns it to a variable called value. It then calls a function named modifyInp with value as an argument. This function is likely responsible for processing or updating the input value in some way. Overall, inputHandler is designed to handle input events and pass the input value to a function for further manipulation.

answered Oct 2, 2023 at 23:12

Tony Ngomana

874 silver badges22 bronze badges

3 Comments

remix23 Over a year ago

The thing is we don't know what the Details component is. And it does not seem to pass the event to the handler. And since we don't know what input is, it may not be the desired behavior to replace the value.

remix23 Over a year ago

That said, the OP intent is not clear and your answer may still be right.

Tony Ngomana Over a year ago

The way i see it, it might be that Details could be just a simple textbox. Would you mind editing your question and supply the code for Details?

Collectives™ on Stack Overflow

How to update the state element properly in react js?

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related