button vs input

[Indra Lukmana]

Hi,

In the “More Practice with State, setState and Props” section. The video show the code for how to make button with <input> then change it to use <button>. I follow the instruction in the Practice4.js using <input> with type=”button” so before playing the video I use this code:

const Button = props => (
  <input type="button" onClick={props.onCLick} value={props.text} />
);

As opposed to the <button> used in the video:

const Button = props => <button onClick={props.onCLick}>{props.text}</button>;

I don’t think they are different because they are not in a form element. But they should behave differently in form elemen, is this correct?

[GPorter43]

Its better practice to use button, as there was a bug in firefox which prevented you setting line height for Input type button.

Plus <button> has a much wider range of rendering possibilities, for example Input type button can only have text where as button can have images,icons ,etc

[Author]

Posts