React-Bootstrap: Why is my event handler not defined in this case?

Question

I'm trying to create an upload image button and I am stuck in the process of making an event handler:

I am guessing it is because of the function declaration method? I have watched videos and they all seem to use the original react instead of the react-bootstrap.

I have also tried this:

  fileSelectedHandler = (event) => {
    console.log(event);
  }

function App() {
  fileSelectedHandler = function(event) {
    console.log(event);
  }
  
  return (
      <div className="App">
        <header className = 'App-header'>
          <Container fluid style = {{padding: 0 , top: 0}}>
            <Nav />
          </Container>
          <Container fluid style = {{padding: 0, top: 0}}>
            <Row>

              <Col style = {{ minWidth: '10%' }}>
                <Sidebar />
              </Col>

              <Col style = {{minWidth: '10%'}}>
                  
              </Col>

              <Col xs = {8}>

              <h1>
                Welcome to my homepage!
              </h1>
              <p>
                <Link to = "./blogs/scatter-gather">
                This is the paragraph.
                </Link>
              </p>
                
              </Col>
                      
              <Col style = {{minWidth: '10%'}}>
                
              </Col>

              <input type = "file" onChange = {this.fileSelectedHandler} />

            </Row>
          </Container>

        </header>
      </div>

  );
}

Here is the debugging info:

Failed to compile.

src\App.js Line 10:3: 'fileSelectedHandler' is not defined no-undef

Search for the keywords to learn more about each error.