Passing Data

index.html

<div id="root"></div>

passing-data.markdown

Passing Data

A Pen by Leah J on CodePen.

License.

script.babel

function ClickyButtons({numberOfButtons, onSelection}) {
  const makeButton = v => <button key={v} id={v} onClick={event => onSelection(event.target.id)}>{v}</button>;
  return <div>
    {_.range(1, numberOfButtons + 1).map(makeButton)}
  </div>;
}

ReactDOM.render(<ClickyButtons numberOfButtons={99} onSelection={console.log}/>,
  document.getElementById('root')
);

scripts

<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>