CODEWITHSUNDEEP
reactjsformsuse-state
jbuddy_13
jbuddy_13

Reputation: 1250

Updating an array with useState in a form

In the below, I have verified that setNewItem works, however items doesn't get updated so there must be an issue with the function handleSubmit. What is going wrong here?

import "./styles.css";
import React, {useState, useEffect} from 'react';


export default function App() {
  const [items, setItems] = useState(['first item']);
  const [newItem, setNewItem] = useState("");
  
  const handleSubmit = (event, newItem, items) => {
    event.preventDefault();
    setItems([ newItem, ...items]);
  };

  const handleChange = (event) => {
    setNewItem(event.target.value);
  }
  
  return (
    <div>
      <form>
        <input type="text" 
               value={newItem} 
               onChange={handleChange}
              />
        <input type="submit" 
               value="submit"
               onSubmit={handleSubmit}
               />
      </form> 
    <ul>
      {items.map( (i) => {
        return(<li>{i}</li>)
      })}
    </ul> 
    </div>
  );
}

https://codesandbox.io/s/new?file=/src/App.js:0-797

Upvotes: 0

Views: 752

Answers (2)

Hacı Celal Aygar
Hacı Celal Aygar

Reputation: 518

You need to change and try this.

  const handleSubmit = (event) => {
    event.preventDefault();
    setItems([ newItem, ...items]);
  };

 ...
 ...
 ...

 <input type="submit" 
      value="submit"
      onSubmit={event => handleSubmit(event)}
 />

Upvotes: 0

Kenneth Ong
Kenneth Ong

Reputation: 303

try this 👇

import "./styles.css";
import React, { useState, useEffect } from "react";

export default function App() {
  const [items, setItems] = useState(["first item"]);
  const [newItem, setNewItem] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("here");
    setItems([newItem, ...items]);
  };

  const handleChange = (event) => {
    setNewItem(event.target.value);
  };

  return (
    <div>
      <form>
        <input type="text" value={newItem} onChange={handleChange} />
        <input type="button" value="submit" onClick={handleSubmit} />
      </form>
      <ul>
        {items.map((i) => {
          return <li>{i}</li>;
        })}
      </ul>
    </div>
  );
}

Upvotes: 1

Related Questions