Like what others have said, Make use of the react setState. For storing in localStorage this video might help you https://www.youtube.com/watch?v=ZZS1irWSfxc

I have written this simple code to save my data to local storage but sometimes it works and sometimes it doesn’t(no change to code). And it mostly saves empty data. what is going on here? Also the data is erased when the chrome window is closed, reopened and new data is entered.

This is the content inside return method.

<div className="wrapper">
              <div className="content">
                <h1>Get in touch!</h1>
                <p>Connect with us by sending your views.</p>
              </div>
              <div className="form">
                <div className="top-form">
                  <div className="inner-form">
                    <div className="label">Name</div>
                    <input
                      type="text"
                      placeholder="Enter your name"
                      id="contname"
                    />
                  </div>
                  <div className="inner-form">
                    <div className="label">Email</div>
                    <input
                      type="text"
                      placeholder="Enter your email"
                      id="contemail"
                    />
                  </div>
                  <div className="inner-form">
                    <div className="label">Phone</div>
                    <input
                      type="text"
                      placeholder="Enter your phone no."
                      id="contph"
                      required
                    />
                  </div>
                </div>
                <div className="middle-form">
                  <div className="inner-form">
                    <div className="label">Subject</div>
                    <input
                      type="text"
                      placeholder="Enter the subject"
                      id="contsub"
                    />
                  </div>
                </div>
                <div className="bottom-form">
                  <div className="inner-form">
                    <div className="label">Message</div>
                    <textarea
                      placeholder="Enter your message"
                      id="contmessage"
                    ></textarea>
                  </div>
                </div>
                <div className="btn" id="sendmessage" onClick={ev => { this.addData(ev) }}>
                  Continue
                </div>
              </div>

and this is the portion to save data:

var contactData = [];
export default class Contact extends Component {
  componentDidMount() {
    window.scrollTo(0, 0)
  }

  addData = (ev) => {
    ev.preventDefault();
    let cdata = {
      contactname: document.getElementById("contname").value,
      contactphno: document.getElementById("contph").value,
      contactemail: document.getElementById("contemail").value,
      contactsubject: document.getElementById("contsub").value,
      contactmessage: document.getElementById("contmessage").value
    };
    contactData.push(cdata);
    localStorage.setItem("Contactinfo", JSON.stringify(contactData));
    alert("Data Submitted succesfully!");
  };