Join.js

import React from 'react'
import JList from './JList'
import request from '../request'
import { withRouter, Redirect } from "react-router-dom";

class Join extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            click: false,
            check: false,
            title: "",
            description: "",
        }
        this.Submit = this.Submit.bind(this);
    }
    Makefile = e => {
        this.setState({
            click: true
        });
    }
    Goback = e => {
        this.setState({
            click: false
        });
    }
    handleTitle = e => {
        this.setState({
            title: e.target.value
        })
    }
    handleDes = e => {
        this.setState({
            description: e.target.value
        })
    }
    Submit = event => {
        event.preventDefault();
        this.Goback();
        
        const data = ({
            title: this.state.title,
            description: this.state.description
        });
        
        request.joinList(data);
	this.props.history.push('/match');
    }
    render() {
        if(this.state.click === false){
            return(
                <div className="Group">
                    <button type="button" onClick={this.Makefile} className="Groupbut">new</button>
                    <JList></JList>
                </div>
            )
        } else {
            return (
                <div>
                    <div className="form_container">
                        
                        <div>
                            <div>
                                <p className="form_item_name">title</p>
                            </div>
                            <div>
                                <input type="text" onChange={this.handleTitle} className="form_input" placeholder="Input Title" ></input>
                            </div>
                            <div className="form_text_alert_padding">
                                <div id="alert_username" className="form_text_alert"></div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p className="form_item_name">description</p>
                            </div>
                            <div>
                                <textarea className="form_input" cols='10' rows='10'placeholder="Input Description" onChange={this.handleDes}></textarea>
                            </div>
                            <div className="form_text_alert_padding">
                                <div id="alert_username" className="form_text_alert"></div>
                            </div>
                        </div>
                        <div>
                            <button type="button" onClick={this.Submit} className="form_submit_button">save</button>
                            <button type="button" onClick={this.Goback} className="form_cancel_button">back</button>
                        </div>
                    </div>
                </div>
            )
        }
    }
}

export default withRouter(Join)