Reputation: 56
I'm studying ReactJS and Firebase. My code works fine but when I decided to add another field to my database using the form from my site it shows me an error that it's not defined. I tried to hard-code the values but name_comment
doesn't change the values in my database at firebase. My code is shown below and the screenshot of the error.
My code:
const AddProfList = () => {
const [name, setName] = useState('')
const [rating, setRating] = useState('')
const [comment, setComment] = useState('')
const classes = useStyles();
const handleChange = (event) => {
setRating(event.target.value);
};
function onSubmit(e){
e.preventDefault()
console.log()
firebase
.firestore()
.collection('names')
.add({
name,
name_comment: 'comment',
name_rating: parseInt(rating),
})
.then(() => {
setName('')
setRating('')
setComment('')
})
}
return(
<Paper className={classes.paper}>
<form onSubmit = {onSubmit}>
<h2>Add Professor Rating</h2>
<div className={classes.root} noValidate autoComplete="off">
<TextField
id="outlined-basic"
label="Prof's Name"
variant="outlined"
type="text"
value={name}
onChange={e => setName(e.currentTarget.value)}
/>
</div>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Rating</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={rating}
onChange={handleChange}
label="Rating"
>
<MenuItem value={1}>1</MenuItem>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
<MenuItem value={4}>4</MenuItem>
<MenuItem value={5}>5</MenuItem>
<MenuItem value={6}>6</MenuItem>
<MenuItem value={7}>7</MenuItem>
<MenuItem value={8}>8</MenuItem>
<MenuItem value={9}>9</MenuItem>
<MenuItem value={10}>10</MenuItem>
</Select>
</FormControl>
<div className={classes.multilineSize}>
<TextField
id="outlined-multiline"
label="Comment"
multiline
rows={4}
variant="outlined"
type="text"
value={comment}
onChange={e => setComment(e.currentTarget.value)}
/>
</div>
<div className="button-margin">
<Button type="submit" variant="contained" color="primary">
Submit Rating
</Button>
</div>
</form>
</Paper>
);
}
Screenshot of error message:
Upvotes: 0
Views: 154
Reputation: 56
I have solved this issue. I changed const [comment, setComment] = useState('')
to const [name_comment, setComment] = useState('')
Upvotes: 1
Reputation: 83
as in the Frank's answer name_comment is not defined it seems.
const [name_comment, setNameComment] = useState("")
.....
function onSubmit(e){
e.preventDefault()
firebase
.firestore()
.collection('names')
.add({
name,
name_comment,
name_rating: parseInt(rating),
})
.then(() => {
setName('')
setRating('')
setComment('')
})
}
Upvotes: 0
Reputation: 599956
You're not giving a name for name
and nameComment
, and it seems that nameComment
is not defined.
One simple fix is to specify hard-coded values:
firebase
.firestore()
.collection('names')
.add({
name: 'value of name',
name_comment: 'value of comment',
name_rating: parseInt(rating),
})
.then(() => {
setName('')
setRating('')
setComment('')
})
Upvotes: 0