React - How to print the value of an input onChange inside the component

Question

This is my component:

export default function ImageUpload({ onSuccess, children}) {

  let value = '';
  const onUpload = async (element) => {
    element = element.target.files;
    let response;
    // Call endpoint to upload the file 
    value = element[0].name;
    return onSuccess(response.url);   
  };

  return <div>
    <div >
      {children}
      <input type="file" id="upload" onChange={onUpload.bind(this)} />
    </div>
    <span>{value}</span>
  </div>; 
}

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?

UPDATE 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?

Why do you say that it doesn't belong into the state? The component has to be re-rendered to show the name of the file. You could put at least the name(s) of the file(s) in the state. — Fabian Schultz
– Fabian Schultz, Commented Feb 20, 2017 at 16:52
Because is an information that are useful only inside the component, and never used outside. — Tres
– Tres, Commented Feb 21, 2017 at 8:34

Robsonsjre · Accepted Answer · 2017-02-20 17:45:29Z

2

I can think about changing the approach, and transform your component to a class type component, something like that:

export default class ImageUpload extends Component {
  constructor() {
    this.state = {
      value: ''
    }
    this.onUpload = this.onUpload.bind(this)
  }

  onUpload() {
    let value = '';
    const onUpload = async (element) => {
      element = element.target.files;
      let response;
      // Call endpoint to upload the file 
      value = element[0].name;
      this.props.onSuccess(response.url);
      this.setState({ value: value })
    };
  }

  render () {
    return <div>
      <div >
        {children}
        <input type="file" id="upload" onChange={this.onUpload} />
      </div>
      <span>{this.state.value}</span>
    </div>;
  }

}

edited Feb 20, 2017 at 17:45

answered Feb 20, 2017 at 17:23

Robsonsjre

1,57112 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mateusz Over a year ago

onUpload bind in render in unnecessary if you bind it in constructor.

Tres Over a year ago

So there is no way to achieve this without using the internal state of the component

Collectives™ on Stack Overflow

React - How to print the value of an input onChange inside the component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related