I Am Not Able To Submit Because Read Property 'value' Of Undefined

I have an input and a button and it seems that it cannot detect the value of the input. I didn't use any form tag and I am wondering if that is the cause. What am I missing here? M

Solution 1:

1. e.target gives you the reference for the button, and no data of the form can be found there.
2. You have duplicate type property type="submit" and type="button", type=submit will submit the form, and type=button is just a button.

If you don't want to use React's state, which you probably should anyway. https://reactjs.org/docs/hooks-state.html, you can wrap your input elements in a form element and attach an onSubmit handler for the form. Change the button's type to submit (remember to add preventDefault(), so it won't "POST" the form automatically).

Then in your e.currentTarget you will have access to all the elements inside the form.

constTest = () => {
  constonFormSubmit = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const formData = newFormData(e.currentTarget);
    for (let [name, value] of formData.entries()) {
      /* makePost function here or something */console.log(name + ":" + value);
    }
  }
  return (
    <formonSubmit={onFormSubmit}><divclassName="input-group mb-3"><inputtype="text"className="form-control"name={"id_maybe"} placeholder="add a post"/><divclass="input-group-append"><buttontype="submit"class="btn btn-primary">Post</button></div></div></form>
  );
}

ReactDOM.render(<Test />, document.getElementById("root"));

<divid="root"></div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

Solution 2:

I think this is what you're looking for

importReact, { useState } from"react";
import"./style.css";

exportdefaultfunctionApp() {
  const [value, setValue] = useState("");
  const [posts, setPosts] = useState([]);
  constonSubmit = () => {
    posts.push(value);
    setPosts([...posts]);
    setValue("");
  };

  consthandleInput = e => {
    setValue(e.target.value);
  };
  return (
    <divclassName="input-group mb-3"><inputtype="text"className="form-control"placeholder="add a post"value={value}onChange={handleInput}
      /><divclass="input-group-append"><buttonclass="btn btn-primary"onClick={onSubmit}>
          Add Post
        </button></div>

      {posts.map(post => (
        <div>{post}</div>
      ))}
    </div>
  );
}

Solution 3:

e.target[0].value doesn't work. You cannot find the 0th element of e.target. Instead of doing that, you could try directly accesing value using e.target.value instead.

I don't think you're doing it the right way. With all due respect, your code is pretty sloppy. First of all, you have no <form> element. Second, you're doing this in a pretty weird way. Instead of using a separate function, you directly insert an arrow function into button.

You should also use State and add this in your constructor:

this.state = {
  items: [],
  text: ""
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);

First of all, add an handleChange button here:

handleChange(event) {
  this.setState({ text: event.target.value });
}

You can use something like this for your submit function:

handleSubmit(event) {
  event.preventDefault();
  const newItem = {
    text: this.state.text,
    id: performance.now()
  };
  this.setState(state => ({
    items: state.items.concat(newItem),,
    text: ""
  }));
}

Change this in your render function:

<form><inputtype="text"className="form-control"onChange= {this.handleChange}value={this.state.text}placeholder="add a post"/><divclass="input-group-append"><buttontype="submit"class="btn btn-primary"onClick={this.handleSubmit}>Post</button></div></form>

You seem to be a newcomer to React, so why don't you read the React Tutorial?