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 './App.css';
import Log from './Log'; import Log from './Log';
function App() { interface Props {
return ( }
<div className="App">
<div className="chat-log"> interface State {
<Log /> 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>
</div> );
); }
} }
export default App; export default App;

View File

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