How do I implement reusable form for add and update actions in react?

Question

I'm trying to implement <RecipeForm /> in my <AddRecipe /> component. Later on I would like to reuse the same form for an update action. The recipe is still not added to the list.

1. I'm defining handleAddRecipe in my App.js.
2. passing it to <AddRecipe /> component
3. from here passing it to <RecipeForm /> component

What do I need to fix in these components?

<AddRecipe /> component:

class AddRecipe extends Component {
  render() {
    return (
      <div>
      <h2>Add New Recipe:</h2>
        <RecipeForm
          handleAddRecipe={this.props.handleAddRecipe}
        />
      </div>
    )
  }
}

export default AddRecipe;

repo: https://github.com/kstulgys/fcc-recipe-box/blob/master/src/components/AddRecipe.js

I guess the trickiest part is <RecipeForm /> component:

export default class RecipeForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        url: this.props.url || '',
        title: this.props.title || '',
        description: this.props.description || '',
        error: ''
    };
  }

  onUrlChange = (e) => {
    const url = e.target.value;
    this.setState(() => ({ url }));
  };
  onTitleChange = (e) => {
    const title = e.target.value;
    this.setState(() => ({ title }));
  };
  onDescriptionChange = (e) => {
    const description = e.target.value;
    this.setState(() => ({ description }));
  };

  onSubmit = (e) => {
    e.preventDefault();
    if (!this.state.url || !this.state.title || !this.state.description) {
      this.setState(() => ({ error: 'Please provide description and amount.'}));
    } else {
      this.setState(() => ({ error: ''}));
      this.props.onSubmit({
        url: this.state.url,
        title: this.state.title,
        description: this.state.description
      });
    }
  }

  render () {
    const submitText = this.state.title ? 'Update' : 'Create' ;
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          {this.state.error && <p>{this.state.error}</p>}
          <input
            type='text'
            placeholder='picture url'
            autoFocus
            value={this.state.url}
            onChange={this.onUrlChange}
          />
          <input
            type='text'
            placeholder='title'
            autoFocus
            value={this.state.title}
            onChange={this.onTitleChange}
          />
          <input
            type='text'
            placeholder='description'
            autoFocus
            value={this.state.description}
            onChange={this.onDescriptionChange}
          />
          <button>Add Expense</button>
        </form>
      </div>
    )
  }
}

Answer 1

In my opinion the onSubmit function is not being invoked.

• The button on the form must be type="submit"
• You should bind onSubmit function to current scope, in the constructor with this.onSubmit = this.onSubmit.bind(this)