Conditionally Render parent component screen on child component a Form onSubmit() call. (w/ react-redux)

Question

I have a parent component that displays a form when a button is clicked. This button marked (+) (see Image 1) will cause a "Create a new Course" child component to be displayed. I am trying to hide this child component after the user makes a "Create Course" submission (see Image 2).

Current method I am displaying here is to assigning a "onClick" functionin the child component form that triggers a parent function to toggle the form to hide. However, the child form apparently can't handle both a "onSubmit" function and "onClick" button function at the same time.

Any suggestions or advice would be most welcome.

Image 1

Image 2

PARENT COMPONENT

class ContentCreation extends Component {


    constructor(props) {
        super(props);
        this.toggleCreateCourseFormOpen = this.toggleCreateCourseFormOpen.bind(this);
        this.state = {
            (...)
            createCourseFormOpen: false,  <---- USED TO INDICATE IF THE CHILD FORM SHOULD BE DISPLAYED OR NOT
           
            (...)
        };

      }

    //Toggles the "createCourseFormOpen variable from false to true; or from true to false//
    toggleCreateCourseFormOpen() {

            this.setState({createCourseFormOpen: !this.state.createCourseFormOpen})

        }


    render() {

        (...) 

            return ( 

                (...)
                        
                    

                    <div className='row center center-align'>
                        <h4>List of Your Courses</h4>
                            <div className='col l12 s12 m12'>
                            <button className='btn btn-floating custom-orange lighten-1' onClick={this.toggleCreateCourseFormOpen}>{this.state.createCourseFormOpen ? '-' : '+'}</button>
                                
                                
                                {this.state.createCourseFormOpen ? <CreateCourseForm triggerToggleCreateCourseFormOpen={this.toggleCreateCourseFormOpen} /> : ''}
                                            {/* Passing down the courses from the courseReducer into the "CourseList" component. */}
                                        

                                        <CourseList courses={courses}/>
                            
                        </div>

                    </div>

                </div>

            )
        }

(.... Rest Of Code ....)

CHILD (CreateCourseForm.js) COMPONENT

    //Function used when user submits a create course request.
    handleSubmit = (e) => {

        e.preventDefault();
        this.props.createCourse(this.state)

    }

    render() {

        return (

            <div className='container selection create-course green'>

                        <form onSubmit={this.handleSubmit} className='white'>
                            <h5 className='grey-text text-darken-3'>Create a new Course</h5>
            
                            {/* Input field for Course Name*/}
                            <div className='input-field'>
                                <label htmlFor='courseName'>Course Name</label>
                                <input type='text' id='courseName' onChange={this.handleChange}/>
                            </div>

                            {/* Input field for Course Details*/}
                            <div className='input-field'>
                                <label htmlFor='courseDescription'>Course Description</label>
                                <textarea className='materialize-textarea' id='courseDescription' onChange={this.handleChange}>
                                
                                </textarea> 
                                
                            </div>

                            {/* Button used to create the new course.*/}
                            <div className='input-field'>
                                <button onClick={this.props.triggerToggleCreateCourseFormOpen} className='btn custom-orange lighten-1 z-depth-0'>Create Course</button>
                            </div>

                        </form>

            </div>
        )

    }

}

(.... Rest of Code .... )

Answer 1

I think the best solution is to listen one event.

  handleSubmit = (e) => {
    
            e.preventDefault();
            this.props.triggerToggleCreateCourseFormOpen(e)
            this.props.createCourse(this.state)
            
    
        }

If you want your code to work. You need to add the type(type="submit"):

<div className='input-field'>
                                <button type="submit" onClick={this.props.triggerToggleCreateCourseFormOpen} className='btn custom-orange lighten-1 z-depth-0'>Create Course</button>
                            </div>