hiding a form- component after clicking submit react js

Question

I am currently working on my first fullstack Single Page App (just a simple todo list web app.I am using react. I have a component Add-task-form that renders every time the user clicks the 'Add task' button. My form works perfectly fine after the user clicks submit BUT, after submission, I haven't been able to figure out a way to make the form dissapear. I have a "success-component" that renders a message "task successfully add to database" and it also renders properly but right next to the "add-task-form". Where should I look into to make muy 'add-task-form' hide once the task has been successfully added to the database(after clicking submit)? Any guidance will be much appreciated.

This is my add-task- form's code:

 export class AddTaskForm extends Component {
       constructor() {
          super();
           this.state = {
               name: '',
               notes: '',
               timeSpent: '',
               done:null
           };
       }

       handleChange = e => {
           this.setState({ [e.target.name]: e.target.value });
       };

       handleSubmit = e => {
           e.preventDefault();
           const newTask = this.state;
           if (!newTask.name || isNaN(newTask.timeSpent)) {
               this.setState({ error: true })
           } else {
               this.props.add({ ...newTask, projectId: this.props.projectId 
   });
               this.setState({ name: '', notes: '', timeSpent: '', error: 
   false, done: true})
           }
       };

    render() {
        return (
            <div>
                <h1>Add a Task</h1>
                <div className="form-fields">
                    <ValidatorForm onSubmit={this.handleSubmit}>
                        <FormControl>
                            <InputLabel htmlFor="name-simple">Task Name</InputLabel>
                            <Input
                                id="name"
                                type="text"
                                name="name"
                                value={this.state.name}
                                onChange={this.handleChange}
                            />
                        </FormControl>
                        {this.state.error ? (
                            <FormHelperText error id="name-error-text">This Field is required</FormHelperText>
                        ) : null}
                    </ValidatorForm>
                    <FormControl>
                        <InputLabel htmlFor="notes">Task Notes</InputLabel>
                        <Input
                            id="notes"
                            type="text"
                            name="notes"
                            value={this.state.notes}
                            onChange={this.handleChange}
                        />
                    </FormControl>
                    <ValidatorForm onSubmit={this.handleSubmit}>
                    <FormControl>
                        <InputLabel htmlFor="name-simple">Time Spent</InputLabel>
                        <Input
                            id="name-simple"
                            type="text"
                            name="timeSpent"
                            value={this.state.timeSpent}
                            onChange={this.handleChange}
                        />
                    </FormControl>
                        {this.state.error ? (
                            <FormHelperText error id="name-error-text">A number is required</FormHelperText>
                        ) : null}
                    </ValidatorForm>
                    <ListItem>
                        <Button
                            variant="contained"
                            color="primary"
                            onClick={this.handleSubmit}
                        >
                            Submit Task
              </Button>
                        {this.state.done && !this.state.error ? (
                            <div>
                                <Success itemName={this.state.name} sentFrom= "task" doingWhat= "added!" />
                            </div>
                        ) : null}
                    </ListItem>
                </div>
            </div>
        );
    }
}

Answer 1

You could hide the form in the same way you show your Success component:

{!this.state.done && (
  <ValidatorForm onSubmit={this.handleSubmit}>
    {/* ... */}
  </ValidatorForm>
)}