미고렝 코딩

App.js:

import './App.css'
import React from 'react';
const username = "annonymous"

class Twittler extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            tweets: []
        }
        this.handleButtonClick = this.handleButtonClick.bind(this)
    }
    handleButtonClick(){
        let tweetArr = this.state.tweets.slice()
        tweetArr.push({username: username, text: document.getElementById("textBox").value, time: new Date().toLocaleTimeString()})
        this.setState({tweets: tweetArr})
    }
    render(){        
        return (
            <header className="App-header">
				<div className="textBox-Button">
                    <textarea id="textBox"></textarea>
					<NewTweetForm handleButtonClick = {this.handleButtonClick} />
				</div>
                <div id = "tweets">
                    <Tweets arr = {this.state.tweets}/>
                </div>
                <div>this is app2</div>
			</header>            
        )
    }
}

function NewTweetForm({handleButtonClick}){
    let handleClick = ()=>{
        handleButtonClick()
    }
    return <button id= "postButton" onClick= {handleClick.bind(this)} >Post</button>
}
function makeArr(arr){
    return arr.map((el,idx)=>{
        return <li key = {idx.toString()}>
            <div>{el.username}</div>
            <div>{el.text}</div>
            <div>{el.time}</div>
            <hr/>
        </li>
    })
}

function Tweets ({arr}){   
    return (
        <ul id = "ul">{                
            makeArr(arr)
        }</ul>
    )
}


function App(){
    return (
		<div className="App">
			<Twittler />
		</div>
	);
}
export default App

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();