this.setState({}) String contains an invalid character

Question

I have this code:

export default class AssignmentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            questions: [],
            questionId: this.props.questionId,
            pictures: [],
        };
        this.handleTextSubmit = this.handleTextSubmit.bind(this);
        this.assignUserToAssignment = this.assignUserToAssignment.bind(this);
        this.handleImageSubmit = this.handleImageSubmit.bind(this);
        this.onImageDrop = this.onImageDrop.bind(this);
        this.handleImageSubmit = this.handleImageSubmit.bind(this);
    }

    async componentDidMount() {
        const questionsRef = firebase.database().ref('Works').orderByChild('firebaseKey').equalTo(this.props.questionId);
        await questionsRef.on('value', snapshot => {
            let questions = snapshot.val();
            let newState = [];
            for (let question in questions) {
                newState.push({
                    id: question,
                    category: questions[question].category,
                    level: questions[question].level,
                    pointAmount: questions[question].pointAmount,
                    pointBoost: questions[question].pointBoost,
                    photoURL: questions[question].photoURL,
                    workText: questions[question].workText,
                });
            }
            try {
                this.setState({
                    questions: newState
                });
            } catch (e) {
                console.log('assignment', e)
            }
        });
        await this.assignUserToAssignment();
    }


    async assignUserToAssignment() {
        var currentUser = firebase.auth().currentUser;
        var currentAssignment = firebase.database().ref('Works').child(this.props.questionId);

        await currentAssignment.child('available').set(false).catch(e => console.log(e));
        await currentAssignment.child('state').set('Taken').catch(e => console.log(e));
        await currentAssignment.child('solverID').set(currentUser.uid).catch(e => console.log(e));
        await firebase.database().ref('Users').child(currentUser.uid).child('assignedWork').set(this.props.questionId).catch(e => console.log(e));
    }


    async handleTextSubmit(e) {
        e.preventDefault();
        var textAnswer = document.getElementById('textAnswer').value;
        var currentAssignment = firebase.database().ref('Works').child(this.props.questionId);
        if (textAnswer.length > 0) {
            let pushRef = currentAssignment.child('answers').push();
            pushRef.set({
                textAnswer: textAnswer,
                date: Time.generate(),
                seen: false,
                firebaseKey: pushRef.getKey(),
                workKey: this.props.questionId
            }).catch(e => console.log('push->set', e))
        }
    }

    async onImageDrop(files) {
        await this.setState({
            uploadedFile: files[0]
        });

        this.handleImageSubmit(files[0]);
    }

    async handleImageSubmit(file) {
        // Create the file metadata
        var metadata = {
            contentType: 'image/jpeg'
        };
        var uploadTask = firebase.storage().ref().child('images/' + Uuid.generate()).put(file, metadata);
        var outerThis = this;
        uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
            function (snapshot) {
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log('Upload is ' + progress + '% done');
                switch (snapshot.state) {
                    case firebase.storage.TaskState.PAUSED: // or 'paused'
                        console.log('Upload is paused');
                        break;
                    case firebase.storage.TaskState.RUNNING: // or 'running'
                        console.log('Upload is running');
                        break;
                    default:
                        console.log('test1');
                        break;
                }
            }, function (error) {
                // A full list of error codes is available at
                // https://firebase.google.com/docs/storage/web/handle-errors
                switch (error.code) {
                    case 'storage/unauthorized':
                        // User doesn't have permission to access the object
                        break;

                    case 'storage/canceled':
                        // User canceled the upload
                        break;

                    case 'storage/unknown':
                        // Unknown error occurred, inspect error.serverResponse
                        break;

                    default:
                        console.log('test2');
                        break;
                }
            }, function () {
                uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
                    console.log('File available at', downloadURL);
                    var currentAssignment = firebase.database().ref('Works').child(outerThis.props.questionId);
                    let pushRef = currentAssignment.child('answers').push();
                    try {
                        pushRef.set({
                            downloadURL: downloadURL,
                            date: Time.generate(),
                            seen: false,
                            firebaseKey: pushRef.getKey(),
                            workKey: outerThis.props.questionId
                        }).catch(e => console.log('push->set', e));
                        outerThis.state.setState({
                            pictures: outerThis.state.pictures.concat(downloadURL),
                        })
                    } catch (e) {
                        console.log('tutej', e)
                    }
                });
            });
    }

    render() {
        return (
            this.state.questions.map(question => {
                return (
                    <section key={question.id} className='display-question'>
                        <div className='wrapper show-grid'>
                            <h3>Kategoria: {question.category}</h3>
                            <p>Poziom: {question.level}</p>
                            <p>Punkty: {question.pointAmount + question.pointBoost}</p>
                            <Col xs={12} md={6}>
                                <img alt='' style={{width: '100%'}}
                                     src={question.photoURL}/>{/*Need 100% for the ratio*/}
                                <p>{question.workText}</p>
                            </Col>
                            <Col xs={12} md={6}>
                                <form encType="multipart/form-data" onSubmit={this.handleTextSubmit}>
                                    <textarea name="textAnswer" id="textAnswer" style={{
                                        width: '100%',
                                        height: '50vh',
                                        background: 'white',
                                        color: 'black',
                                    }}/>
                                    <Button type='submit' style={{display: 'block'}}>Wyslij odpowiedz tekstowa</Button>
                                    <Dropzone
                                        multiple={false}
                                        accept="image/*"
                                        onDrop={this.onImageDrop.bind(this)}>
                                        <p>Wyslij zdjecie w odpowiedzi</p>
                                    </Dropzone>

                                    <CancelAnswerButton questionId={question.id}/>

                                    <FinishAnswerButton questionId={question.id}/>
                                </form>
                            </Col>
                        </div>
                    </section>
                )
            })
        )
    }
}

And this part:

this.setState({
    questions: newState
});

Is throwing an error saying: InvalidCharacterError: String contains an invalid character , which I do not understand, since the syntax seems to be in order to me.

I all started going south after I took out these two elements:

CancelAnswerButton :

export default class CancelAnswerButton extends React.Component {
    constructor(props) {
        super(props);
    }

    async handleCanceling(e) {
        try {
            e.preventDefault();
            var currentAssignment = firebase.database().ref('Works').child(this.props.questionId);
            var currentUser = firebase.auth().currentUser;

            await currentAssignment.child('available').set(true).catch(e => console.log(e));
            await currentAssignment.child('state').set('Waiting').catch(e => console.log(e));
            await currentAssignment.child('solverID').remove().catch(e => console.log(e));
            await firebase.database().ref('Users').child(currentUser.uid).child('assignedWork').remove().catch(e => console.log(e));
            return <AssignmentsComponent/>
            // TODO Delete reputation points
        }
        catch (e) {
            console.log('handle', e)
        }
    }

    render() {
        try {
            return (
                <Button onClick={this.handleCanceling} style={{display: 'block'}}>Anuluj
                    rozwiazywanie
                    zadan (Odejmujemy
                    za to pkt z rangi koleszko)</Button>

            )
        }
        catch (e) {
            console.log('render', e)
        }
    }
}

FinishAnswerButton :

export default class FinishAnswerButton extends React.Component {
    constructor(props) {
        super(props);
    }

    async handleFinishAssignment() {
        var currentUser = firebase.auth().currentUser;
        await firebase.database().ref('Users').child(currentUser.uid).child('assignedWork').remove().catch(e => console.log(e));
        var currentAssignment = firebase.database().ref('Works').child(this.props.questionId);
        await currentAssignment.child('state').set('Completed').catch(e => console.log(e));
        await currentAssignment.child('finishTime').set(Time.generate()).catch(e => console.log('finishTime', e));
        return <AssignmentsComponent/>
    }

    render() {
        return (
            <Button onClick={this.handleFinishAssignment}>Zakoncz rozwiazywanie zadania (Upewnij
                sie ze uczen ma wszystko czego potrzebuje!)</Button>
        )
    }
}

But they both look ok. So what am I missing?

I was trying to make the code more modular, and am still learning React, so there are probably a lot of issues.

Example of the question object:

question = {
    category: "Fizyka",
    id: "-LF2OGgGXD-xPpSa64CX",
    level: "Liceum",
    photoURL: "https://firebasestorage.googleapis.com/v0/b/uczsieapp.appspot.com/o/images%2Faf941460-05e8-4943-8ea0-b24359e22cdf?alt=media&token=7141bf45-55c4-467c-a533-a268d95fe6cf",
    pointAmount: 32,
    pointBoost: 0,​
}

Answer 1

Killing and restarting the yarn start process fixed the issue. No idea why. If someone knows or has an idea please feel free to leave an answer/comment