How to make inputs controlled here and also how to avoid saving react components in variables and passing them as props?

How to make inputs controlled here and also how to avoid saving react components in variables and passing them as props?

import React from 'react';

import ReactDOM from 'react-dom';

import './main.css'

class Application extends React.Component {

    constructor(props) {

      super(props);

      this.state = {

        data:[],

      }

    }

    

    fileChangedHandler = event => {

        this.setState({

          selectedFile: event.target.files[0]

        })

        let reader = new FileReader();

     

        reader.onloadend = () => {

          this.setState({

            imagePreviewUrl: reader.result

          });

        }

     

        reader.readAsDataURL(event.target.files[0])

     

      }  

            

    onSubmit = event => {

      event.preventDefault();

      const username = this.username.value;

      const caption = this.caption.value;

      const imagePreviewUrl = this.imagePreviewUrl.value;

      const info = {username: username, caption: caption, imagePreviewUrl:<img src={this.state.imagePreviewUrl} alt="icon" width="600" />  };

      const data = [...this.state.data, info];

      this.setState({

        data: data

      });

    };

  

    render() {

       

      return (

          <div className="container">

            <h1>Post your images with a quirky caption!</h1>

  

            <hr/>

  

            <div className="row">

              <form className="form-inline" onSubmit={this.onSubmit} layout="inline">

                <input

                    type="text"

                    className="form-control mb-2 mr-sm-2 mb-sm-0"

                    placeholder="Username"

                    ref={input => this.username = input}/>

                <div className="input-group mb-2 mr-sm-2 mb-sm-0">

                  <input

                      type="text"

                      className="form-control"

                      placeholder="caption"

                      ref={input => this.caption = input}/>

                

                <input

                      type="file"

                      className="form-control"

                      placeholder="post"

                      onChange={this.fileChangedHandler}

                      ref={input => this.imagePreviewUrl = input}/>

                      

                  </div>

                      

                <button type="submit" className="btn btn-primary">Save</button>

                

              </form>

            </div>

  

            <hr/>

  

            <div className="row">

              {

                this.state.data.map((info, index) => <Card key={index} info={info}/>)

              }

            </div>

  

          </div>

      )

    }

  }

  

  

  const Card = props =>

      <div className="col-md-6 col-lg-3">

        <div className="card mb-3">

          <div className="card-body">

            <p className="card-title"><span>Username: </span>{props.info.username} </p>

            <p className="card-text">

              <span> </span>{props.info.imagePreviewUrl}

            <p className="card-post">

              <span>caption: </span>{props.info.caption}</p>

              

            </p>

          </div>

        </div>

      </div>;

  

  ReactDOM.render(

      <Application/>,

      document.getElementById('root')

  );