As stated in title, Only the last form of the array returned value. Other form returned empty. Need help understanding how:

addComment(event) {
    event.preventDefault();

    const mentContent = this.refsmentContent.value;

    console.log(mentContent);
    this.refsmentContent.value = '';

}

renderArticleList() {
   return (
       this.props.articles.map( (article) => {
          const articleId = article._id;
          return (
             <div key={articleId}>

                <form onSubmit={this.addComment.bind(this)}>
                   <textarea ref="mentContent"/>
                   <button type="submit">Add Comment</button>
                </form>

             </div>
          )
       })
    )
 }

Code Solutions to solve problem greatly appreciated. Links to help understand and solve the problem also great.

As stated in title, Only the last form of the array returned value. Other form returned empty. Need help understanding how:

addComment(event) {
    event.preventDefault();

    const mentContent = this.refs.mentContent.value;

    console.log(mentContent);
    this.refs.mentContent.value = '';

}

renderArticleList() {
   return (
       this.props.articles.map( (article) => {
          const articleId = article._id;
          return (
             <div key={articleId}>

                <form onSubmit={this.addComment.bind(this)}>
                   <textarea ref="mentContent"/>
                   <button type="submit">Add Comment</button>
                </form>

             </div>
          )
       })
    )
 }

Code Solutions to solve problem greatly appreciated. Links to help understand and solve the problem also great.

• javascript
• reactjs
• meteor
• meteor-react

Share Improve this question Follow edited Apr 17, 2017 at 19:10 Mayank Shukla 105k1919 gold badges162162 silver badges145145 bronze badges asked Feb 16, 2017 at 10:29 Meteor_UN666Meteor_UN666 3911 silver badge66 bronze badges 3

• Can you clarify what you are trying to do? Are you trying to populate the textarea with content from your props? – Sean Commented Feb 16, 2017 at 10:34
• 1 Your problem here will be related to using the same ref for every form, how will the function know which one you are talking about. I would suggest reading this page facebook.github.io/react/docs/forms.html for guidance on using forms within your ponents. You may be better of using state, i.e. have a state value that is set from any of the forms, and then the onSubmit function looks at that state value. – Blakey Commented Feb 16, 2017 at 10:36
• ref is scoped to the ponent, so as long as you're using the same ref name, you'll have one reference. In your case, your references are overriding one another and you're only left with the last one. – Oro Commented Feb 16, 2017 at 10:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Reason is, you are using the same ref for all the input element, to make the ref unique, append the index of form with the ref, and pass that index to submit function, and use that index to access the input field value, Try this:

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
    }

    addComment(i, event) {
       event.preventDefault();
       let ref = 'mentContent'+i;
       console.log('value', this.refs[ref].value);
    }

    render() {
        return (
          <div>
            {
              this.props.articles.map( (article,i) => {
                  const articleId = article._id;
                  return (
                    <div key={articleId}>

                      <form onSubmit={this.addComment.bind(this,i)}>
                        <textarea ref={"mentContent"+i}/>
                        <button type="submit">Add Comment</button>
                      </form>

                    </div>
                  )
                })
            }
          </div>
        )
    }
}


ReactDOM.render(<App />, document.getElementById('container'));

Check the working code:

class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        value: ''
    };
}

addComment(i, event) {
event.preventDefault();
let ref = 'mentContent'+i;
console.log('value', this.refs[ref].value);
}

render() {
return (<div>
  {[1,2,3].map( (article,i) => {
    return (
      <div key={i}>
        <form onSubmit={this.addComment.bind(this,i)}>
          <textarea ref={"mentContent"+i}/>
          <button type="submit">Add Comment</button>
        </form>
      </div>
    )
  })}
  </div>
  )
  }

}

ReactDOM.render(<App />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container'/>

Check the working fiddle: https://jsfiddle/0fggkdw3/