How to concatenate new form item into existing state array

Question

This is my react code and I want to concatenate my new form input to existing state array on button click I tried to concatenate state array with different methods but it isn't working, can anyone help me in this regard:

import { useState } from 'react';
import './App.css';

let App = ()=>{

const [initial, addInitial] = useState('');
const [val, addVal] = useState(["Banana"]);

  let changeHandler = (e)=>{
    addInitial(e.target.value)
  }

  let addItem =()=>{

      let newItem = initial;
        
  }

    return(
    <div id="parent">
        <div id="container">
            <h1>To-Do List</h1>

          <div id="sub1">
            <input type="text" value={initial} onChange ={changeHandler} placeholder='Add a item' autoFocus/>
            <button id="add" onClick = {addItem}>+</button>
          </div>
          
            
          <div id="sub2">
            
            {
              val.map((name, index)=>{
                return(
                  <div id="cross" key={index}> 
                    <button id="remove">&#10060;</button>
                    {name}
                  </div>
                )})
            }

          </div>
        </div>
    </div>
    )
}

export default App;

Pratik Wadekar · Accepted Answer · 2022-07-20 05:52:04Z

1

In your addItem() method use this

let addItem = () => {
  addVal(prevValues => [...prevValues, initial]);
};

answered Jul 20, 2022 at 5:52

Pratik Wadekar

1,2749 silver badges19 bronze badges

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

3 Comments

Anas Over a year ago

Thank you so much dear could you please brief little how its working?

Enfield Li Over a year ago

@Anas Look up the usage of spread operator in js

Pratik Wadekar Over a year ago

@Anas setState() function in react gives you a callback which has access to previous State Values that can be used to update your existing state. So in the above I used previous state values spread it across the array and added your new value i.e initial

Collectives™ on Stack Overflow

How to concatenate new form item into existing state array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related