Q: If I am repeating myself in React, should I create a Component? I am building a simple SPA application that has a LoginForm and Reset Form form. 
Both of these components share the methods
getInputFields() and handleSubmit()
Here's an example of my code:
import React from 'react';

import InputField from './InputField';
import SubmitButton from './SubmitButton';

class ResetForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.getInputFields = this.getInputFields.bind(this);
  }
  handleSubmit(e) {
    e.preventDefault();
    console.log('submitted');
  }
  getInputFields() {
    return [
      { type: 'email', placeholder: 'Email' }
    ]
  }
  render() {
    return (
     <form onSubmit={ this.handleSubmit }>
        {
          this.getInputFields()
            .map((field) => <InputField type={ field.type } placeholder={ field.placeholder } />)
        }
        <SubmitButton />
      </form>
    )
  }
}

export default ResetForm;

And my LoginForm only has different data (within getInputFields())
If I repeat myself, should I be automatically thinking about making a new component? e.g. in this case a <Form> component and pass the values of getInputFields() into Form as a prop?

A: In general, whether it's building a webapp with React or writing a program in Java or any software stuff if you're repeating code it's often a good idea to see how you can collate it all into one source. It may not improve your software's efficiency but it's  cleaner and easier to organise and less error prone as there's simply only one place where the errors could occur.
One of the nice things about React is being able to make reusable components, and doing so can certainly make building and debugging apps easier. However, not EVERYTHING has to be a component, if you take a simple group of elements that aren't reused and turn it into like 3 different React components just because you can, it's kind of like premature optimization. You should stop and think 'am I going to be reusing this group of HTML a lot and what benefits do I get if it's in component form?'
For React, looking at your example in particular, if the input fields you're getting data from are different in type and number, and the action(s) you perform on submission are different between the two form types (which I assume they are) then it's ok to have two different components (like you do). You could have an extra component like you said, a <Form /> component that takes the values of getInputFields() if you want but it looks like the HTML for your form is very minimal. Just the form element, with some dynamic components and a single submit button. Therefore since it's not a lot of HTML and there's only 2 instances of it, you CAN put it in component form but it's not something that's in desperate need of it and I'm sure there's bigger things to worry about. There's usually two situations I find where I make components:


*

*A bunch of HTML and associated functions are used lots and lots of times

*A bunch of HTML and associated functions are used a few times, but it's a LOT of HTML or a LOT of functions so repeating them in every component that needs them is bloating your code and making it hard to read through or debug


What I usually do is just create components as and when I see stuff being reused multiple times, then every now and then (and at the end) I have a look through and see if there's any little things here and there that could potentially be condensed to single React component just to make things a little bit cleaner.
In the end it's good to make components for those two reasons above, but if it comes to tiny little things (like 1 or two HTML elements that are repeated maybe 2-3 times) then I'd worry about the bigger stuff first before stressing over the little stuff.
