App holds the messages

This commit is contained in:
Franck Royer 2021-04-14 15:23:00 +10:00 committed by Franck Royer
parent c5ea01bcb4
commit 5f9e6b24eb
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
2 changed files with 31 additions and 23 deletions

View File

@ -2,14 +2,31 @@ import React from 'react';
import './App.css';
import Log from './Log';
function App() {
return (
<div className="App">
<div className="chat-log">
<Log />
interface Props {
}
interface State {
messages: string[]
}
class App extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
messages: ['Here is a line', 'Here is another line']
};
}
render() {
return (
<div className='App'>
<div className='chat-log'>
<Log lines={this.state.messages} />
</div>
</div>
</div>
);
);
}
}
export default App;

View File

@ -1,40 +1,31 @@
import React from 'react';
interface Props {
lines: string[]
}
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()}
{this.renderLines(this.props.lines)}
</div>
);
}
renderLines() {
renderLines(lines: string[]) {
const lines = [];
for (const line of this.state.lines) {
lines.push(<div className='log-row'>{line}</div>);
const renderedLines = [];
for (const line of lines) {
renderedLines.push(<div className='log-row'>{line}</div>);
}
return (
<div>
{lines}
{renderedLines}
</div>
);
}