Handling (Merge) Objects in Reactjs State

Question

I am working on a todo application in reactjs. I am using object in react state for title and task. The issue is whenever I try to merge old state with new one it does not work.

Please check my code below.

const [todo, setTodo] = useState({ title: "", task: ""});

const setObj = { title: valueOfTile, task: valueOfTask};

setTodo({...todo , ...setObj});

Also how can I iterate through them? This is what I am doing to iterate:

{Object.keys(todo).map((data, i) => (
    <div className="main " key={data}>
      <div CLASSNAME="first">
        <h1>{todo.title}</h1>
      </div>
      <div className="second">
        <p>{todo.task}</p>
      </div>
    </div>
  ))}

I am not sure why I am getting two rows for one added title and task. Check image

user9408899 · Accepted Answer · 2019-08-21 17:56:12Z

1

Change your state with this:

const [todo, setTodo] = useState([]);

Then, change this

setTodo({...todo , ...setObj});

with this:

setTodo([...todo, setObj]);

You don't need to use spread operator on setObj. Currently you are adding two items to your state. That's why you are getting two rows.

For mapping, you can do something like this:

{ todo.map( (data, index) => {
    // Your code
})

edited Aug 21, 2019 at 17:56

answered Aug 21, 2019 at 17:34

user9408899

4,5805 gold badges21 silver badges33 bronze badges

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

Comments

Sora Shiro · Accepted Answer · 2019-08-21 17:32:48Z

0

Your first question (update state) needs more information, please give complete code.
Object.keys(todo) will return ["title", "task"], so ["title", "task"].map(function())'s function in map will execute twice time, and results render 2 <div>.

answered Aug 21, 2019 at 17:32

Sora Shiro

1529 bronze badges

Collectives™ on Stack Overflow

Handling (Merge) Objects in Reactjs State

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related