Permalink
Browse files

class -> stateless functional

  • Loading branch information...
1 parent 6a5415a commit 8fd2142bc4ea830ab271e82c5bf38a601d88785b @stoyan committed Dec 31, 2016
Showing with 35 additions and 41 deletions.
  1. +35 −41 src/App.js
View
@@ -48,48 +48,42 @@ class App extends Component {
}
}
-class Uploads extends Component {
- render() {
- return (
- <div>
- <label htmlFor="files" className="Uploads-select">Select files...</label>
- <input
- type="file"
- id="files"
- multiple
- accept="image/*"
- style={{display: 'none'}}
- onChange={this.props.onChange}
- />
- </div>
- );
- }
-}
+const Uploads = ({onChange}) =>
+ <div>
+ <label htmlFor="files" className="Uploads-select">Select files...</label>
+ <input
+ type="file"
+ id="files"
+ multiple
+ accept="image/*"
+ style={{display: 'none'}}
+ onChange={onChange}
+ />
+ </div>;
-class Results extends Component {
- render() {
- if (this.props.files.length === 0) {return <span/>;}
- return (
- <table className="Results-table">
- <tbody>
- <tr><th>Image</th><th>filename</th><th>size</th><th>mime</th></tr>
- {this.props.files.map((f, idx) => {
- if (!f.type.startsWith('image/')) {
- return null;
- }
- return (
- <tr key={idx}>
- <td><img alt={f.name} src={window.URL.createObjectURL(f)} height="60" /></td>
- <td>{f.name}</td>
- <td>{f.size}</td>
- <td>{f.type}</td>
- </tr>
- );
- })}
- </tbody>
- </table>
- );
- }
+
+const Results = ({files}) => {
+ if (files.length === 0) {return <span/>;}
+ return (
+ <table className="Results-table">
+ <tbody>
+ <tr><th>Image</th><th>filename</th><th>size</th><th>mime</th></tr>
+ {files.map((f, idx) => {
+ if (!f.type.startsWith('image/')) {
+ return null;
+ }
+ return (
+ <tr key={idx}>
+ <td><img alt={f.name} src={window.URL.createObjectURL(f)} height="60" /></td>
+ <td>{f.name}</td>
+ <td>{f.size}</td>
+ <td>{f.type}</td>
+ </tr>
+ );
+ })}
+ </tbody>
+ </table>
+ );
}
export default App;

0 comments on commit 8fd2142

Please sign in to comment.