react saving data to firestore
Question
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> );
3 answers
solution1
1 2020-11-29 19:43:17
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.
}
solution2
0 2020-11-29 19:53:02
either add the # for the query selector
const progress = document.querySelector('#progresscontainer');
or use getElementById method
const progress = document.getElementById('progresscontainer');
solution3
0 2020-11-29 20:09:48
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.