Use onChange event to set file in React

by geoj12

HTML

<div id="root"></div>

CSS

body {
  height: 100vh;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  text-align: center
}

#root, #other-div {
  width: 100%;
}

React

const {useState, useEffect} = React;

const FileComponentTest = () => {
  const [file, setFile] = useState(null);

  useEffect(() => {
  	if(file){
    	    console.log("File has been set.")
    }
  },[file]);

  return (
    <React.Fragment>
      <input
        type="file"
        onChange= {(e) => setFile(e.target.files[0])}
        value ={""}
      />
    </React.Fragment>
  )
};

ReactDOM.render( <FileComponentTest />, document.getElementById('root') );