Passing submitted form data to another component

Question

I have the following code, it basically accepts some basic input and when submit button is clicked user is notified with an alert, state is constantly being updated via onChange event. What i wonder is can i somehow pass the retrieved data to another component inside the event handler for submit button (which i have called handleFormSubmit)? I have recently seen react has something called 'context' ...maybe that would be best here? Advice please? :)

class Form extends Component {

    constructor(props) {
        super(props)

        this.state = {
             username: '',
             comments: '',
             topic: 'react'
        }

        this.handleUsernameChange = this.handleUsernameChange.bind(this);
        this.handleCommentsChange = this.handleCommentsChange.bind(this);
        this.handleTopicChange = this.handleTopicChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    handleUsernameChange(event){
        this.setState({
            username: event.target.value
        },
        () =>{
            console.log(this.state.username)
        })
    }

    handleCommentsChange(event){
        this.setState({
            comments: event.target.value
        },
        () =>{
            console.log(this.state.comments)
        })
    }

    handleTopicChange(event){
        this.setState({
            topic: event.target.value
        },
        () =>{
            console.log(this.state.topic)
        })
    }

    handleFormSubmit(event){
        event.preventDefault();

        alert(`${this.state.username} ${this.state.comments} ${this.state.topic}`);
    }

    render() {
        return (
            <form onSubmit={this.handleFormSubmit}>
                <div>
                    <label>Username</label>
                    <input type='text' value={this.state.username} onChange={this.handleUsernameChange}/>
                </div>
                <div>
                    <textarea value={this.state.comments} onChange={this.handleCommentsChange}></textarea>
                </div>
                <div>
                    <select value={this.state.topic} onChange={this.handleTopicChange}>
                        <option value="react">React</option>
                        <option value="angular">Angular</option>
                        <option value="vue">Vue</option>
                    </select>
                </div>

                <button>Submit</button>
            </form>
        )
    }
}

Answer 1

Hi all i made some changes and got something working, added extra state attribute called dataSubmitted set it to false then only after i submit the data is child (which i called AcceptFormData) allowed to render and i pass the state attributes as props. I do not know if this is a good approach or not but it works and no console errors.

class Form extends Component {

    constructor(props) {
        super(props)

        this.state = {
             username: '',
             comments: '',
             topic: 'react',
             dataSubmitted: false
        }

        this.handleUsernameChange = this.handleUsernameChange.bind(this);
        this.handleCommentsChange = this.handleCommentsChange.bind(this);
        this.handleTopicChange = this.handleTopicChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    handleUsernameChange(event){
        this.setState({
            username: event.target.value
        },
        () =>{
            console.log(this.state.username)
        })
    }

    handleCommentsChange(event){
        this.setState({
            comments: event.target.value
        },
        () =>{
            console.log(this.state.comments)
        })
    }

    handleTopicChange(event){
        this.setState({
            topic: event.target.value
        },
        () =>{
            console.log(this.state.topic)
        })
    }

    handleFormSubmit(event){
        event.preventDefault();

        this.setState({
            dataSubmitted: true
        })
    }

    render() {
        if(this.state.dataSubmitted === false){
            return (
                <form onSubmit={this.handleFormSubmit}>
                    <div>
                        <label>Username</label>
                        <input type='text' value={this.state.username} onChange={this.handleUsernameChange}/>
                    </div>
                    <div>
                        <textarea value={this.state.comments} onChange={this.handleCommentsChange}></textarea>
                    </div>
                    <div>
                        <select value={this.state.topic} onChange={this.handleTopicChange}>
                            <option value="react">React</option>
                            <option value="angular">Angular</option>
                            <option value="vue">Vue</option>
                        </select>
                    </div>
                    <button>Submit</button>
                </form>
            )
        }else{
            return (
                <AcceptFormData username={this.state.username} comments={this.state.comments} topic={this.state.topic}/>
            )
        }
    }
}

export default Form