CODEWITHSUNDEEP
javascriptreactjs
EngLa
EngLa

Reputation: 11

get the value of text area by GetElementByName

am trying to add the value of a textarea to the state of my component. but it doesn't seem to be working. in console.log . it gives me the id correctly but the value as undefined . the addListItem is triggered by a button.

import React from "react";
import ReactDOM from "react-dom";

import "../../styles/styles.css";

class BlockInput extends React.Component {
  state = {
    items: [{ id: 0, value: "" }],
  };

  addListItem = () => {
    console.log(this.state);
    var x = parseInt(document.getElementById("seed").innerHTML);

    const newItem = {
      id: x,
      value: document.getElementsByName("hi").text,
    };

    document.getElementById("seed").innerHTML = x + 1;
    this.setState({
      items: [...this.state.items, newItem],
    });
  };

  createList = () => {
    const { items } = this.state;
    return items.map((item) => {
      return (
        <div>
          <textarea className="item" id={item.id} type="text" name="hi" ></textarea>
          <button type="button" onClick={(e) => this.handleDelete(item)}>
            delete
          </button>
        </div>
      );
    });
  };

Upvotes: 0

Views: 329

Answers (1)

phoenixstudio
phoenixstudio

Reputation: 2638

The function getElementsByName return an "collection of all elements in the document with the specified name" and not a single one, second you should use value to read what inside the textarea if you have only one textarea with that name (in your page), this code will work.

document.getElementsByName("hi")[0].value

Upvotes: 1

Related Questions