CODEWITHSUNDEEP
javascriptfirebasegoogle-cloud-firestore
Joey
Joey

Reputation: 56

ReactJS with firebase.add undefined error

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

Answers (3)

Joey
Joey

Reputation: 56

I have solved this issue. I changed const [comment, setComment] = useState('') to const [name_comment, setComment] = useState('')

Upvotes: 1

Madusha Lakruwan
Madusha Lakruwan

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

Frank van Puffelen
Frank van Puffelen

Reputation: 600061

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

Related Questions