CODEWITHSUNDEEP
reactjs
Sai Krishnadas
Sai Krishnadas

Reputation: 3419

How to add items to array in react

Code:

export default function App() {
  const [name,setName] = useState("");
  var myArray = [];
  const handleAdd = () => {
    myArray = [...myArray,name]
    setName("")
  }
  return (
    <div className="App">
      <input placeholder="type a name" onChange={(e) => setName(e.target.value)}/>
      <button onClick={handleAdd}>add</button> 
      <button onClick={() => console.log(myArray)}>test</button>
      {myArray.map((n) => {
        return <h2>{n}</h2> 
      })}
    </div>
  );
}

OnClick it isn't adding the name to the array.

Upvotes: 1

Views: 9182

Answers (4)

Rushabh Nahata
Rushabh Nahata

Reputation: 1

import React, { useState } from 'react'

  const Final = () => {
   const [input,setInput]=useState("");
  const[array,setArray]=useState([]);

   const handleClick=(e)=>{
     setArray([...array,input]);
      setInput("");
     }
         const Rushabh=(e)=>{
          if(e.key==='Enter'){
          handleClick();
          }
           }
       return (
         <div>
              <input type="text" id="input" placeholder="Name" value= 
         {input} onChange= 
           {(e)=>setInput(e.target.value)} onKeyDown={Rushabh}/>
          <button type="button" onClick={handleClick}>Button</button>

            <p>{array.map((e,index)=>{
              return (
                  <p key={index}>{e}</p>
              )
            })}</p>
           </div>
          )
          }

          export default Final

Upvotes: 0

aiotrope
aiotrope

Reputation: 196

We can also set the state of myArr to be an empty array initially, making it easier to manipulate the subsequent state of that array. The onClick event handler does not fire the handleAdd function, for some reason, it only resets the form and does not provide any state. To submit the form and materialize the state, we can also use the onSubmit event handler instead of onClick. In the same way, we can use the name state as a value/prop for the name input, which will be used by the onChange handler.

import React, { useState } from 'react'

const App = () => {
const [name, setName] = useState('')
const [myArr, setMyArr] = useState([])

const submit = (event) => {
  event.preventDefault()
  setMyArr(myArr.concat(name))
  setName('')
}

//console.log(myArr)
return (
  <div className="App">
    <form onSubmit={submit}>
      <div>
         <label htmlFor="name">Name</label>
         <input
           placeholder="type a name"
           type="text"
           value={name}
           onChange={({ target }) => setName(target.value)}
          />
        </div>
      <div>
        <button type="submit">Add</button>
      </div>
    </form>
    <div>
      {myArr.map((arr, index) => (
        <div key={index}>
          <p>{arr}</p>
        </div>
      ))}
    </div>
   </div>
  )
 }

export default App

I have a proclivity of inserting items on an array using concat.

import React, { useState } from 'react'
// ...
const App = () => {

// ...

const [myArr, setMyArr] = useState([])

// somewhere on your event handler e.g. Submit handler
setMyArr(myArr.concat(name))

// ...

}

Upvotes: 0

codmitu
codmitu

Reputation: 709

this is how you "push" to an array with useState

const [array, setArray] = useState([])
setArray(previous => [...previuous, newItem])

Upvotes: 6

Aneesh
Aneesh

Reputation: 1715

You should use a state for your array and set that state to see the changes reflected:

export default function App() {
    const [name, setName] = useState('');
    const [myArray, setMyArray] = useState([]);
    const handleAdd = () => {
        setMyArray([...myArray, name]);
        setName('');
    };
    return (
        <div className="App">
            <input
                placeholder="type a name"
                onChange={(e) => setName(e.target.value)}
            />
            <button onClick={handleAdd}>add</button>
            <button onClick={() => console.log(myArray)}>test</button>
            {myArray.map((n) => {
                return <h2>{n}</h2>;
            })}
        </div>
    );
}

Upvotes: 1

Related Questions