title: React - How to print the value of an input onChange inside the component
body: <p>This is my component:</p>
  
  <pre><code>export default function ImageUpload({ onSuccess, children}) {
  
    let value = '';
    const onUpload = async (element) =&gt; {
      element = element.target.files;
      let response;
      // Call endpoint to upload the file 
      value = element[0].name;
      return onSuccess(response.url);   
    };
  
    return &lt;div&gt;
      &lt;div &gt;
        {children}
        &lt;input type="file" id="upload" onChange={onUpload.bind(this)} /&gt;
      &lt;/div&gt;
      &lt;span&gt;{value}&lt;/span&gt;
    &lt;/div&gt;; 
  }
  </code></pre>
  
  <p>I would like to print inside the span the name of the file chosen from the user.
  I use redux for the state, but this information is not something that belongs to the state.
  This way does not work, could someone explain me why?</p>
  
  <p><em>UPDATE</em>
  Since looks like there is no way to achieve this without state my question is about the best approach:
  Use Redux also if I don't need this value outside the component or use the internal state of the component but ending to have both Redux and this state?</p>