whenever I click add my page refreshes so all the value in array resets

Question

Please give me solution I am creating a app similar to Google keep. As soon as I click add button is add to array after that it refreshes the page and array value resets

Here's my Code

import React, { useState } from "react";

function CreateArea() {
  const [title1, setTitle1] = useState([]);
  const [note1, setNote1] = useState([]);

  function Changed(event) {
    const a = event.target.name;
    // const b=event.target.name;
    if (a === "title") {
      // console.log("hello")
      setTitle1(event.target.value);
    } else {
      // console.log("note")
      setNote1(event.target.value);
    }
  }

  function addNote() {
    // setTitle1((prevValue) => {
    //   return [...prevValue, title1]
    // })
    // console.log(titleCont)
    setNote1("");
    setTitle1("");
    console.log(title1);
  }

  return (
    <div>
      <form>
        <input
          name="title"
          onChange={Changed}
          placeholder="Title"
          // value={title1}
        />
        <textarea
          name="content"
          onChange={Changed}
          placeholder="Take a note..."
          // value={note1}
          rows="3"
        />
        <button onClick={addNote}>Add</button>
      </form>
    </div>
  );
}

export default CreateArea;

IDK if this code if sufficient or not if need more of my code plz tell me i will add more

Maniraj Murugan · Accepted Answer · 2021-02-20T10:37:22.687

1

Change,

<button onClick={addNote}>Add</button>

To:

<button type="button" onClick={addNote}> Add </button>

If we don't use type="button" , browser will set it to 'reset' or 'submit' which cause to page reload.

Ref: https://stackoverflow.com/a/20760450/7785337

Working example:

edited Feb 20 '21 at 10:37

answered Feb 20 '21 at 10:26

Maniraj Murugan

8,868
20
67
116

score 1 · Answer 2 · answered Feb 20 '21 at 10:27

You need to create another piece of state to store the notes.

import React, { useState } from "react";
    
    function CreateArea() {
      const [title1, setTitle1] = useState(""); // changes
      const [note1, setNote1] = useState(""); // changes
      const [notes, setNotes] = useState([]); // changes 
    
      function Changed(event) {
        const a = event.target.name;
        // const b=event.target.name;
        if (a === "title") {
          // console.log("hello")
          setTitle1(event.target.value);
        } else {
          // console.log("note")
          setNote1(event.target.value);
        }
      }
    
      function addNote() {
        
        setNotes([...notes,{title:title1,text:note1}]) // changes
        setNote1("");
        setTitle1("");
        console.log(title1);
      }
    
      return (
        <div>
          <form>
            <input
              name="title"
              onChange={Changed}
              placeholder="Title"
              // value={title1}
            />
            <textarea
              name="content"
              onChange={Changed}
              placeholder="Take a note..."
              // value={note1}
              rows="3"
            />
            <button type="button" onClick={addNote}>Add</button>// changes
          </form>
        </div>
      );
    }
    
    export default CreateArea;

score 1 · Answer 3 · answered Feb 20 '21 at 10:30

1

By default button is type submit. You can pass to the button type="button" or pass event.preventDefault() in your function.I prefer this.

 function addNote(event) {
    event.preventDefault();
    // ... rest of the code 
  }

answered Feb 20 '21 at 10:30

Zhivko Zhelev

321
4
10

Can u plz explain me why do i prefer "event.preventDefault()" instead of " type="button" "? sry for asking stupid question i am new at web-dev – Keshav Feb 20 '21 at 10:49

whenever I click add my page refreshes so all the value in array resets

3 Answers3