JList.js

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

class JList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            Lists: [],
            click: false,
            content : "",
            title: ""
        }
    }
    showDes = e => {
        this.setState({
            click: true
        })
        this.state.Lists.map(list => {
            if(list.title === e.target.innerText) {
                this.setState({
                    content: list.description,
                    title: list.title
                })
            }
        })
    }
    Goback = e => {
        this.setState({
            click: false
        });
        this.props.history.push('/join');
    }
    componentDidMount() { 
        request.getJoinList().then().then(data => {
            this.setState({
                Lists: data
            })
        });
    }
    render() {
        const format = [];
        const number = []
        if(this.state.Lists.length > 0){
            this.state.Lists.map(list => {
                number.push(1);
                format.push(<tr></tr>)
                format.push(<td>{number.length}</td>)
                format.push(<td onClick={this.showDes}>{list.title}</td>)
            });
        }
        
        if(this.state.click === true) {
            return(
                <div>
                    <div className="form_container">
                        <div className="form_title_div">
                            <p className="form_title_p">게시물</p>
                        </div>
                        <div>
                            <div>
                                <p className="form_item_name">title</p>
                            </div>
                            <div>
                                <input type="text" className="form_input" value={this.state.title}/>
                            </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">Content</p>
                            </div>
                            <div>
                                <textarea className="form_input" value={this.state.content}/>
                            </div>
                            <div className="form_text_alert_padding">
                                <div id="alert_password" className="form_text_alert"></div>
                            </div>
                        </div>
                        <div>
                            <button type="button" className="form_submit_button" onClick={this.Goback}>Back</button>
                        </div>
                    </div>
                </div>
                            
            ) 
        } else {
            return(
                <div className="showList">
                    <table>
                        <tr>
                            <th>Index</th>
                            <th>Title</th>
                        </tr>
                        {format}
                    </table>
                </div>            
            ) 
        } 
    }
}

export default withRouter(JList)