CODEWITHSUNDEEP
reactjs
cldev
cldev

Reputation: 781

TypeError: Cannot read property 'name' of undefined - react

I have a form with a 'title' and a 'content'. The content is in the ReactQuill component which enables you to have rich text. Before adding that component, my 'onChange' was working fine for both 'inputs'. Now that the components are different it no longer works.

I get the error below:

error

this is the code in AddArticle.js which is where the form is:

import React, { Component } from "react";
import firebase from "../Firebase";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import renderHTML from "react-render-html";

class AddArticle extends Component {
  constructor() {
    super();
    this.ref = firebase.firestore().collection("articles");
    this.state = {
      title: "",
      content: "",
    };
  }

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  onSubmit = (e) => {
    e.preventDefault();

    const { title, content } = this.state;

    this.ref
      .add({
        title,
        content,
      })
      .then((docRef) => {
        this.setState({
          title: "",
          content: "",
        });
        this.props.history.push("/");
      })
      .catch((error) => {
        console.error("Error adding document: ", error);
      });
  };

  render() {
    return (
      <div className="container">
        <br></br>
        <br></br>
        <br></br>
        <div className="panel panel-default">
          <div className="panel-heading">
            <h3 className="panel-title text-center">Create a new article</h3>
          </div>
          <br></br>
          <br></br>
          <div className="panel-body">
            <form onSubmit={this.onSubmit}>
              <div className="form-group input-group-lg">
                <label for="title">Title:</label>
                <input
                  type="text"
                  className="form-control"
                  name="title"
                  value={this.state.title}
                  onChange={this.onChange}
                  placeholder="Title"
                />
              </div>
              <div className="form-group">
                <label for="content">Content:</label>
                <ReactQuill
                  theme="snow"
                  name="content"
                  value={this.state.content}
                  onChange={this.onChange}
                  placeholder="Content"
                />
              </div>
              <button type="submit" className="btn btn-success">
                Submit
              </button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default AddArticle;

Upvotes: 1

Views: 911

Answers (1)

Louis Coulet
Louis Coulet

Reputation: 4591

The onChange for the title input receives an event containing name and value.
On the other hand the onChange for the Quill component receives the actual content.
All in all you should use:

onTitleChange = (e) => {
    this.setState({ title: e.target.value });
};

onContentChange = (content) => {
    this.setState({ content: content });
};

And pass these handlers approprietly to your title input and quill component.

Upvotes: 1

Related Questions