Fetching the input value from textarea in a loop from an array of objects using reactjs. How to do so?

Question

I managed to display X amount of text areas based on the JSON object data I received. I'm wondering how would i obtain A SINGLE user input when they input something in the textarea. I manage to input and get the textarea value but all the textarea values seem to change to the value I enter. How would I enter and obtain ONE SINGLE value and only display what the user inputs for that index only?

DISPLAYING THE TEXTAREAS BASED ON THE DATABASE VALUES, however the input values are not editable or savable by my button

const WorkInProgressHLEDevDays = () =>{
  return (
    <tr>
    <th> TEXTAREAs </th>
    {this.state.WIPHLEsData.map((HLEDevDayTextAreas, i) => (
        <td key={i}>
        <textarea className="HLEDevDays" onChange={this.handleChange} value={HLEDevDayTextAreas.HLEDevDays} spellcheck="false">

        </textarea>
        </td>
    ))}

    </tr>

  )
}

LINK TO HOW IT LOOKS WHEN USER TYPES SOMETHING IN THE TEXTAREA

deepsun · Accepted Answer · 2018-10-11 20:57:55Z

2

The issue you're having is that, for every one of the <textarea> JSX elements you return from your map() method, they're all reading the same value off of state beacause they all use the same key.

Here's the snippet where that's happening.

value ={this.state.jiraWIPHLEsHLEDevDays}

Hence, as you type in any of the text areas, they all render the same text because that's how they're set up. Since you're generating the text areas from a map() method, the text areas themselves will be unique with keys, but you're supplying each of them all with the same key for their input value in state.

What you'll need to do is dynamically create and update the value for each textarea. React has a method for doing this by supplying each input with a name attribute. This will allow you to target that unique value (e.target.name) in your handleChange method.

But, again, since you're creating the text areas dynamically, you'll also have to dynamically create a unique value attribute for each. You can do this pretty easily just by using string interpolation to create a unique value attribute as you return the text areas from the map() method.

As I've done below, ensure that the values of the name and value attributes match, because handleChange() will set the name attribute to component state as you type, and in turn your text area will expect to be able read a value of the same key off of state.

Check out and run the snippet I've supplied below for the details of everything, and to test the implementation.

class RenderTextAreas extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      issues: {
        iOne: 'an issue',
        iTwo: 'another issue',
        iThree: 'yet another issue'
      }
    };
  }
  handleChange = e => {
    let value = e.target.value;
    // create a variable called "name" and store the name attribute in it
    // this variable's value will be unique for each text area
    let name = e.target.name;
    // set that to state, along with the input value
    this.setState({ name: e.target.value });
  };
  render() {
    return (
      <div>
        {Object.keys(this.state.issues).map((issue, i) => (
          <textarea
            key={i}
            placeholder={`${issue}_value`}
            // supply a unique "name" attribute using string interpolation 
            name={`${issue}_value`}
            // read each unique value by using a combination of
            // bracket notation and string interpolation that matches
            // the name attribute above
            value={this.state[`${issue}_value`]}
            onChange={this.handleChange}
          />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<RenderTextAreas />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="app"></div>

I hope that this helps solve your problem! Let us know.

answered Oct 11, 2018 at 20:57

deepsun

4307 silver badges18 bronze badges

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

6 Comments

bobb1213131 Over a year ago

Thank you I will check this tomorrow!

deepsun Over a year ago

@bobb1213131 My pleasure! This is an interesting issue because it sheds light on React's dynamic nature, and the issue itself might not always be immediately apparent. But it was definitely a fun one to go through.

bobb1213131 Over a year ago

Hello, it seems to be working, but I have an issue, when getting textarea values, I am trying to insert the values in my database, then whenever i refresh my page, the textarea values will display the values stored in the database. It seems to only insert the last inserted value from the list of textareas.

bobb1213131 Over a year ago

To be more specific, let's say i click Save the HLE DAYS button, it will update the HLEDevDays value in the database based on which textarea key is being updated, then when inserted in database, when I refresh my page, the data will be displayed (although this i can easily do by a for loop and fetching the data from the api)

deepsun Over a year ago

I see. Well, given your original question, the solution I've provided above is a solve for ensuring input values are unique for each text area generated while the user is typing. If you need to update the DB with the user input on click, and then display that on page refresh, you could initially render the value stored in the DB, and then on click of that element, render a text area to edit that value. Does that make sense?

|

Collectives™ on Stack Overflow

Fetching the input value from textarea in a loop from an array of objects using reactjs. How to do so?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related