0

i need to create image upload field it is easy but it is not working.my code is below.i am working on the part of big project.

import React, { Component } from 'react';



export default class commonFormModel extends Component {

    constructor(props) {
        super();
    }


    render() {
        return (
            <div>
                <input type="file" />
                    <input type="submit" value="Upload Image" name="submit"/>
            </div>                                    
            );
    }

}
sampath kumara
  • 29
  • 6
  • Can you elaborate on "it is not working" part? Also, component name has to start with a capital letter – Agney May 10 '19 at 04:02
  • above code show the button but not show the image upload field what is the reason for – sampath kumara May 10 '19 at 04:04
  • 1
    The code in question is obviously [working](https://codesandbox.io/s/6v2jyk6pxn), please create an [MVCE](https://stackoverflow.com/help/mcve) if you still have issues – Agney May 10 '19 at 04:09
  • Code is seems to be working dude. Which browser you are working? Check your console for any error or warning. – ravibagul91 May 10 '19 at 04:13

1 Answers1

1

If you are importing this component to another component, you must have getting this warning,

Warning: <commonFormModel /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.

  • <component /> compiles to React.createElement('component') (html tag)
  • <Component /> compiles to React.createElement(Component) (react component)
  • <obj.component /> compiles to React.createElement(obj.component) (react component)

You must change classname to PascalCase

export default class commonFormModel extends Component { //Incorrect way

export default class CommonFormModel extends Component { //Correct way

And finally you can use your component like,

<CommonFormModel />

Note: If you don't have state for your component, I suggest you to go for functional component. If you think in future you may have state to this component, then you can use a constructor, but make sure while calling super(), you should pass your props to it like super(props), in your case you are missing that. Also see difference between super() & super(this).

ravibagul91
  • 20,072
  • 5
  • 36
  • 59