React state array (first input not working)

Question

why I can't set the Data in the first Click I Have to input twice to set the data. Thanks for your help...

export default function App() {
  const [title, setTitle] = useState();
  const [projectData, setProjectData] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setProjectData([...projectData, { projectTitle: title }]);
    console.log(projectData);
  };
  return (
    <div className="App">
      <input
        type="text"
        onChange={(e) => {
          setTitle(e.target.value);
        }}
      />
      <button onClick={handleSubmit}>insert</button>
    </div>
  );
}

You are setting the data, the console.log() is just outputting the old data as setState is asyncronous and projectData hasn't changed yet. — DBS
– DBS, Commented Sep 16, 2021 at 8:46
To see what happens in real time, just append this somewhere in the page {JSON.stringify(projectData)}. — rcanpahali
– rcanpahali, Commented Sep 16, 2021 at 8:49

hgb123 · Accepted Answer · 2021-09-16 08:48:12Z

1

Actually it did, but the setState hook runs asynchronously so the console.log after that won't reflect the change. You could use useEffect to watch for the change of projectData instead

import React, { useEffect, useState } from "react";

export default function App() {
  const [title, setTitle] = useState();
  const [projectData, setProjectData] = useState([]);

  useEffect(() => {
    console.log(projectData);
  }, [projectData]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setProjectData([...projectData, { projectTitle: title }]);
  };
  return (
    <div className="App">
      <input
        type="text"
        onChange={(e) => {
          setTitle(e.target.value);
        }}
      />
      <button onClick={handleSubmit}>insert</button>
    </div>
  );
}

answered Sep 16, 2021 at 8:48

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

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

Comments

Abhinav Raut · Accepted Answer · 2021-09-16 08:51:52Z

0

In React setState actions are asynchronous and are batched for performance gains. This is explained in the documentation of setState. If you want to log projectData you can use useEffect hook.

const handleSubmit = (e) => {
  e.preventDefault();
  setProjectData([...projectData, { projectTitle: title }]);
};
  
// useEffect with ProjectData as dependency 
useEffect(() => {
   console.log(projectData);
}, [projectData]);

answered Sep 16, 2021 at 8:51

Abhinav Raut

11 silver badge

Collectives™ on Stack Overflow

React state array (first input not working)

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