CODEWITHSUNDEEP
javascripthtmlreactjsfirebasegoogle-cloud-firestore
Anna Wojciechowska
Anna Wojciechowska

Reputation: 67

react saving data to firestore

I am building an application in React. I would like to save the updated progress data (percentRange after the user clicks on the update button) to the firestore, so I could retrieve it later. Right now I am getting the "TypeError: Cannot read property 'addEventListener' of null" error, and nothing is saving.

Could someone please help me?

Attached relevant part of code and screenshot of firestore

ProgressBar.js

import React, {useState} from 'react';
import './newprogressbar.css';


const Range = (props) => {
    return (
        <div className="range" style={{width: `${props.percentRange}%`}}/>
    );
};

const ProgressBar = (props) => {
    return (
        <div className="progress-bar">
            <Range percentRange={props.percentRange}/>
        </div>
    );
};

export const ProgressBarContainer = () => {
    let [percentRange, setProgress] = useState(0);

    return (
        <div id="progresscontainer">
            <ProgressBar percentRange={percentRange}/>
                <button id="updatepic" onClick={() => setProgress(percentRange < 100 ? percentRange + 10 : 100)}>Daily Update</button>
        </div>
    );
};

Relevant parts of Dashboard.js

const progress = document.querySelector('#progresscontainer');

progress.addEventListener('submit', (e) => {
  e.preventDefault();
  database.collection('ChallangesChosen').add({
    ProgressPercentageage: progress.percentRange.value

  });
})

  return (
    <div className="Dashboard">
      <Header />
      <div className="circle">
        <img id="leafpicture" src={leafpic} alt="eco-picture" />
        <div className="textIn">
          <h1> You saved </h1>
          <h5>{co2} CO2</h5>
        </div>
      </div>
      <div></div>
      <div className="progressbar">
        <h3>Track your challenges!</h3>
        <div>
          <div> {challs} </div>
        </div>
        {testData.map((item, idx) => (
          <ProgressBarContainer/>

        ))}
      </div>
      <br/>
      <br/>
    </div>
  );

Upvotes: 0

Views: 80

Answers (3)

Nikhil
Nikhil

Reputation: 3950

Try to move the <script> section to the end of the <body>. I guess this is the only solution to it. @Doug is correct. querySelector is returning null.NOt able to find it

Upvotes: 0

Ali Faris
Ali Faris

Reputation: 18592

either add the # for the query selector

const progress = document.querySelector('#progresscontainer');

or use getElementById method

const progress = document.getElementById('progresscontainer');

Upvotes: 0

Doug Stevenson
Doug Stevenson

Reputation: 317372

This has nothing to do with Firestore. querySelector is just returning null, so you can't call addEventListener on progress:

const progress = document.querySelector('progresscontainer');

This is expected when no element is found using the provided selector

If you want to target an HTML element by ID using querySelector, you should use a hash:

const progress = document.querySelector('#progresscontainer');

It would actually be more clear if you use getElementById instead:

const progress = document.getElementById('progresscontainer');

It's also a good idea to check the result so that you can find out and recover from any mistakes:

if (progress) {
    // safely use progress here
}
else {
    // Log something to figure out what went wrong.
}

Upvotes: 2

Related Questions