This is my solution:
function mainPage(){
const [newFile, SetNewFile] = useState([]);
const fileChange = (event) => {
SetNewFile( event.target.files[0] );
};
const onFormSubmit = () =>{
// Do something
}
return(
<Form onSubmit={onFormSubmit}>
<Form.Field>
<Button as="label" htmlFor="file" type="button">
Some button stuff
</Button>
<input type="file" id="file" hidden onChange={fileChange} />
</Form.Field>
<Button type="submit">Upload</Button>
</Form>)
}
If you're already using lodash, the [`_.times`](https://lodash.com/docs#times) function is handy.
import React, { Component } from 'react';
import Select from './Select';
import _ from 'lodash';
export default class App extends Component {
render() {
return (
<div className="container">
<ol>
{_.times(3, i =>
<li key={i}>
<Select onSelect={this.onSelect}>
<option value="1">bacon</option>
<option value="2">cheez</option>
</Select>
</li>
)}
</ol>
</div>
);
}
}
