Use Array.map() to Dynamically Render Elements | Purpose of 'value'

Tell us what’s happening:
Hi. I have already passed the test, but a doubt remains.

I was under the impression that e.target.value referred to the value attribute of textarea. That seemed weird since originally value={this.state.userInput} and then, inside handleChange the same userInput is set to e.target.value (would that mean they are referencing each other?).

Next, I tried removing the value attribute of textarea and running the test again. Surprisingly to me, I still passed the test. I’ve searched about the value attribute and MDN says it “defines a default value which will be displayed in the element on page load”. However, it also says that "<textarea> does not support the value attribute".

  1. What is the purpose of the value attribute in textarea here?
  2. Is it connected to e.target.value?

Thanks!

   **Your code so far**

const textAreaStyles = {
	width: 235,
	margin: 5
};

class MyToDoList extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			userInput: '',
			toDoList: []
		};
		this.handleSubmit = this.handleSubmit.bind(this);
		this.handleChange = this.handleChange.bind(this);
	}

	handleSubmit() {
		const itemsArray = this.state.userInput.split(',');
		this.setState({
			toDoList: itemsArray
		});
	}

	handleChange(e) {
		this.setState({
			userInput: e.target.value
		});
	}

	render() {
		const items = this.state.toDoList.map(item => <li>{item}</li>)
		return (
			<div>
				<textarea
					onChange={this.handleChange}
					value={this.state.userInput}
					style={textAreaStyles}
					placeholder='Separate Items With Commas'
				/>
				<br />
				<button onClick={this.handleSubmit}>Create List</button>
				<h1>My "To Do" List:</h1>
				<ul>{items}</ul>
			</div>
		);
	}
}
   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.152 Safari/537.36.

Challenge: Use Array.map() to Dynamically Render Elements

Link to the challenge:

If I understand you correctly …

The textarea value is set to whatever userInput is in state. Then when you call handleChange, it passes in what the change is or would be. The textarea in the DOM hasn’t updated yet because it is bound to state and is controlled by it. It gets updated by setState and then the change gets reflected in the DOM.

I understand your confusion and don’t have a definitive answer. I just think of the event and the DOM as being separate things. Maybe someone smart can explain what is going on under the covers, but for our practical purposes, we mostly need to understand the behavior.

1 Like

I was trying to understand why the attribute value of textarea seems to be “disposable”, as I deleted it and still passed the test.

However, your explanation is in fact really useful. The notion of thinking of the event and the DOM as being separate things is something that had not occurred to me, but it makes a lot of sense.

Thank you so much!

I would guess because the test is not testing for that as it wasn’t directly part of the lesson.

1 Like