how can I clear input field in react after click submit in my case?

Question

can anyone please tell me how to clear all the inputs after I click submit on my homepage component? I tried using reset() after preventdefault in subjectForm component but either I used it wrong or it did not work. I also tried to use setState and put my inputs back to default state which is empty but it also did not work.

everything in my code works fine, but every time I submit a subject, the field does not clear itself

this is my homepage component.

    import React from 'react';
    import SubjectForm from './SubjectForm';
    import {addSubject} from '../actions/subjectAction';
    import {connect} from 'react-redux';

    const HomePage=({dispatch})=>(
        <div>
             <SubjectForm onSubmit ={(subject)=>
                  dispatch(addSubject(subject))
             }/>
</div>
    )

    export default connect()(HomePage);

this is my subjectForm component

import React from 'react';

export default class SubjectForm extends React.Component{
    constructor(props){
        super(props);
        this.state={...} 
    onNameChange =(e)=>{...}  
    onHourChange =(e)=>{...}

    onSubmit=(e)=>{
        e.preventDefault();

        **//I tried using reset() here but it did not work**

        if(!this.state.subjectName){...}

    render(){
        return (
            <div>
                {this.state.error && <p>{this.state.error}</p>}
                <form className='test' onSubmit={this.onSubmit}>
                    <input 
                        type="text"
                        placeholder='enter name'
                        autoFocus
                        value={this.state.subjectName}
                        onChange={this.onNameChange}
                    />
                    <input 
                        type="number"
                        placeholder='enter hour'
                        value={this.state.hour}
                        onChange={this.onHourChange}
                    />
                    <button>Add Subject</button>
                </form>
            </div> 
        )
    }
}

this is my onSubmit function when I tried to return subject to empty.

onSubmit=(e)=>{
    e.preventDefault();
    if(!this.state.subjectName){
        this.setState(()=>({error:'please enter subject name'}))
    }
    else if(!this.state.hour && !this.state.minute){
        this.setState(()=>({error:'please enter time'}))
    }else {
        this.setState(()=>({error:''}));
        this.props.onSubmit({
            subjectName:this.state.subjectName,
            hour:this.state.hour,
            minute:this.state.minute,
            note:this.state.note
         }, console.log(this.state),
        )
        this.setState(()=>({
            subjectName:'',
            hour:0,
            minute:0,
            note:'',
            error:''
        }));
    }
}

Answer 1

Since you are using your state to control the input fields, you should reset the state.field and it will reset the field. So:

onSubmit=(e)=>{
    e.preventDefault();

    **//I tried using reset() here but it did not work**

    if(!this.state.subjectName){...}

    // after finishing all you want to do with it:
    this.setState({
        hour: '', // or any other initial value you have
        subjectName: '',
    });
}