Form Submit Message in React

Question

I am trying to have a message appear with "You are now subscribed to {SUBSCRIPTION}." when a user submits a form in React. I am very new to React, so I feel like I am missing something small (hopefully).

So far, I have something that looks like this:

constructor(props) {
        super(props);

        this.state = {
            user: {
                newsletter: props.newsletter
            }
        }
    }

    handleNewsletterInput(event) {
        var user = this.state.user;

        user.newsletter = event.target.value;

        // Update the state object
        this.setState({ user: user })
    }

    handleSubmit(event) {
        var user = this.state.user;

        user.newsletter = event.target.value;

        alert("You are now subscribed to " + { user } + ".")
    }

    ...

    render() {
        return (
            <div>
                <h2>Subscribe</h2>
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <label>
                        <p>Newsletter Type:</p>
                        <input
                            id='newsletter'
                            type='text'
                            name='newsletter'
                            value={this.state.user.newsletter}
                            onChange={this.handleNewsletterInput.bind(this)}
                        />
                    </label>
                    <button
                        type='submit'
                        id='subscribe'
                        name='subscribe'>
                        Subscribe
                    </button>
                </form>
            </div>
        );

     ...

When I run it, I get a message saying "You are now subscribed to [object Object]." What am I doing wrong, and how can I get [object Object] to say the name of the newsletter?

Answer 1

This is not a React issue.

alert("You are now subscribed to " + { user } + ".")

Here you are concatenating an object with a string. The object is coerced into "[object Object]" string because any object v.toString() gives this by default(unless explicitly set), as its a memory reference. Try this line instead:

alert("You are now subscribed to " + JSON.stringify(user) + ".")

and how can I get [object Object] to say the name of the newsletter?

alert("You are now subscribed to " + user.newsletter + ".")

Unfortunately, I receive an error when I do that. alert("You are now subscribed to " + { user.newsletter } + ".")

This syntax you have mentioned in the comment below question is wrong. {user.newsletter} is not correct syntax, it is neither an object nor a string.

Edit after handleNewsletterInput added:

handleNewsletterInput(event) {
        var user = this.state.user;

        user.newsletter = event.target.value;

        // Update the state object
        this.setState({ user: user })
}

The above will not update state because you have not changed the memory reference of user variable. React will not know that the state has changed as it will do comparison prevState===currentState and it will give true , as its in the same memory location. Try this instead:

handleNewsletterInput(event) {
        const { user } = this.state;

        const updatedUser = {
            ...user,
            newsletter: event.target.value
        }

        // Update the state object
        this.setState({ user: updatedUser })
}

Edit 2: You've also made a mistake here -

handleSubmit(event) {
        var user = this.state.user;

        user.newsletter = event.target.value;

        alert("You are now subscribed to " + { user } + ".")
}

This event is the submit event, you do not need the first two lines here.

handleSubmit(event) {
        // Do something like send form data to backend here.

        alert("You are now subscribed to " + this.state.user.newsletter + ".")
}