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.

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

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

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="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

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

export default function App() {
  const [value, setValue] = useState("");
  const [posts, setPosts] = useState([]);
  const onSubmit = () => {
    posts.push(value);
    setPosts([...posts]);
    setValue("");
  };

  const handleInput = e => {
    setValue(e.target.value);
  };
  return (
    <div className="input-group mb-3">
      <input
        type="text"
        className="form-control"
        placeholder="add a post"
        value={value}
        onChange={handleInput}
      />
      <div class="input-group-append">
        <button class="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>
    <input type="text" className="form-control" onChange= {this.handleChange} value={this.state.text} placeholder="add a post"/>
        <div class="input-group-append">
              <button type="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?