Add new element to DOM in React

I’m new to React, I try to create add a new element to DOM when onClick. So I play with the state. Like below:

const [number, setNumber] = useState(1);
const [item, setItem] = useState(() => [{id: number,task: `Task ${number}`}]);

const increaseItem = () => {
    setNumber(number + 1)
    console.log(number)
    setItem([...item, {id: number, task: `Task ${number}`}])
    console.log(item)
}

But I got an issue when I push the array in useState, the first element of the array copied twice. Here the result of the array:

4 //result of the number

/* Result of item */
0: {id: 1, task: "Task 1"}
1: {id: 1, task: "Task 1"}
2: {id: 2, task: "Task 2"}
3: {id: 3, task: "Task 3"}

Could you show me how the correct way to solve this. Thank you.

121 thoughts on “Add new element to DOM in React”

  1. Greetings from Colorado! I’m bored to tears at work so I decided to browse your blog on my
    iphone during lunch break. I enjoy the knowledge you present here and can’t wait to take a look when I get home.

    I’m surprised at how fast your blog loaded
    on my cell phone .. I’m not even using WIFI, just 3G ..
    Anyways, excellent blog!

    Reply
  2. Hi there just wanted to give you a quick heads up. The text in your content seem to be running off the screen in Chrome.
    I’m not sure if this is a format issue or something to do with web browser compatibility but I figured
    I’d post to let you know. The design and style look great though!
    Hope you get the issue solved soon. Kudos

    Reply
  3. With havin so much written content do you ever run into
    any issues of plagorism or copyright violation? My blog has a lot of exclusive content
    I’ve either written myself or outsourced but it looks like a lot of it is popping it up all over
    the internet without my agreement. Do you know any techniques to
    help prevent content from being ripped off? I’d genuinely appreciate it.
    scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

    Reply
  4. What i don’t realize is if truth be told how you’re now not really much more neatly-appreciated than you may be now. You are so intelligent. You understand therefore significantly when it comes to this matter, made me in my view consider it from so many varied angles. Its like men and women are not involved unless it is one thing to do with Girl gaga! Your individual stuffs nice. At all times maintain it up!

    Reply
  5. Hi there! This is kind of off topic but I need some guidance from an established blog. Is it very difficult to set up your own blog? I’m not very techincal but I can figure things out pretty quick. I’m thinking about setting up my own but I’m not sure where to start. Do you have any ideas or suggestions? Thanks

    Reply
  6. Whats up are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and create my own. Do you require any coding knowledge to make your own blog? Any help would be really appreciated!

    Reply
  7. Hello! Quick question that’s totally off topic. Do you know how to make your site mobile friendly? My website looks weird when viewing from my apple iphone. I’m trying to find a template or plugin that might be able to fix this issue. If you have any recommendations, please share. With thanks!

    Reply
  8. My developer is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the expenses.
    But he’s tryiong none the less. I’ve been using WordPress on several websites for about a year
    and am worried about switching to another platform. I have heard great things about blogengine.net.
    Is there a way I can import all my wordpress content into it?
    Any kind of help would be really appreciated!

    Reply