Handling onChange and setting state for array of input
<p>just a bit of background, I am really new to javascript and web development but have been having fun doing some tutorials on React. Also my first time posting on stackoverflow!</p>

<p>I am building a component to show a list of yes/no questions and users have to respond by selecting radio buttons and optionally adding some comments in a textarea. I'm not really sure how I am supposed to set the state for an array of inputs generated using map.</p>

<p>I have an array holding my questions:</p>

<pre><code>var questions = [
    {id:"1", text:"Is the source up to date?"},
    {id:"2", text:"Question 2 placeholder"},
    {id:"3", text:"Question 3 placeholder"},
]
</code></pre>

<p>and here is my (unfinished) component:</p>

<pre><code>var QuestionList = React.createClass({
    getInitialState: function () {
        return {
            commentText: "",
        }
    },

    onUpdateComments: function (e) {
        this.setState({
            commentText: e.target.value
        });
    },
    render: function () {
        var QuestionLines = this.props.questions.map(function(question) {
            return (
                &lt;div key={question.id}&gt;
                    &lt;div&gt;
                        &lt;div&gt;
                            {question.text}
                        &lt;/div&gt;
                        &lt;label&gt;
                            &lt;input type="radio" name={question.id} value = {question.id+'Y'}/&gt;Yes
                        &lt;/label&gt;
                        &lt;label&gt;
                            &lt;input type="radio" name={question.id} value = {question.id+'N'}/&gt;No
                        &lt;/label&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                        &lt;textarea 
                            name = {question.id}
                            onChange = {this.onUpdateComments}
                            placeholder="Enter comments here" 
                            value={this.state.commentText} /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            );
        }, this);
        return (
            &lt;div&gt;
                {QuestionLines}
            &lt;/div&gt;
        )
    }
});
</code></pre>

<p>The app right now displays the same text in all 3 textareas, and I can see that this is because I am storing all changes to textarea in the same commmentText state.  However, I am really stumped as to what I need to do to separate these and make this work. Any help would be appreciate.</p>

<p>Also, as I mentioned I am super new to this so if anything is off about how I am structuring my component, please let me know.</p>

<p>Thanks!</p>