I'm rendering a list of inputs and I want to bind each input's value to a link's href. My current attempt renders `https://twitter.com/intent/tweet?text=undefined`:

```
class App extends React.Component {
  tweets = [
    { id: 1, link: 'example.com' },
    { id: 2, link: 'example2.com' }
  ];

  render() {
    return (
      <div>
        {this.tweets.map(tweet => 
          <div key={tweet.id}>
            <input type="text" placeholder="text" onChange={e => tweet.text = e.target.value} />
            <a href={`https://twitter.com/intent/tweet?text=${tweet.text}`}>Tweet</a>
          </div>
        )}
      </div>
    );
  }
}

```

This probably needs to involve `setState` but I have no idea how to achieve that when rendering a list. I've tried to do some research on this but didn't found anything helpful.

JSFiddle: <https://jsfiddle.net/nunoarruda/u5c21wj9/3/>

Any ideas?