React: bind input's value in a list

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Babel + JSX

const tweets = [
    { id: 1, link: 'example.com' },
    { id: 2, link: 'example2.com' },
];

class App extends React.Component {
  state = {};

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

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