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

Question

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:

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;

Do you mean like this? console.log(e.target); Sorry I'm really new to this — cldev
– cldev, Commented Sep 17, 2020 at 15:14
Yeah, I found out about this yesterday so every question that's been answered and has helped since then I've marked as 'closed' with the tick. You're right though, I need to go back to thee other ones and do the same for those who have helped. — cldev
– cldev, Commented Sep 17, 2020 at 15:18

Louis Coulet · Accepted Answer · 2020-09-17 15:39:14Z

1

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.

answered Sep 17, 2020 at 15:39

Louis Coulet

4,7314 gold badges27 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related