Display lines

This commit is contained in:
Franck Royer 2021-04-14 15:13:55 +10:00 committed by Franck Royer
parent 8942f0eca1
commit c5ea01bcb4
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
3 changed files with 56 additions and 15 deletions

View File

@ -1,24 +1,13 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Log from './Log';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div className="chat-log">
<Log />
</div>
</div>
);
}

41
web-chat/src/Log.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from 'react';
interface Props {
}
interface State {
lines: string[];
}
export default class Log extends React.Component<Props, State> {
state: State = {
lines: [
'here',
'is',
'a',
'line'
]
};
render() {
return (
<div className='log'>
{this.renderLines()}
</div>
);
}
renderLines() {
const lines = [];
for (const line of this.state.lines) {
lines.push(<div className='log-row'>{line}</div>);
}
return (
<div>
{lines}
</div>
);
}
}

View File

@ -11,3 +11,14 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.log-row {
text-align: left;
margin-left: 20px;
}
.log-row:after {
clear: both;
content: "";
display: table;
}