Simple React app

app.js

class Button extends React.Component {
	handleClick = () => {
  	this.props.onClickFunction(this.props.incrementValue);
  }
  
	render() {
  	return (
    	<button onClick={this.handleClick}>
        +{this.props.incrementValue}
      </button>
    );
  }
}

const Result = (props) => {
	return (
  	<div>{props.counter}</div>
  );
};

class App extends React.Component {
	state = { counter: 0 };
  
  incrementCounter = (incrementValue) => {
  	this.setState((previousState) => ({
      counter: previousState.counter + incrementValue
    }));
  };
  
	render() {
  	return (
    	<div>
        <Button incrementValue={1} onClickFunction={this.incrementCounter} />
        <Button incrementValue={5} onClickFunction={this.incrementCounter} />
        <Button incrementValue={10} onClickFunction={this.incrementCounter} />
        <Button incrementValue={100} onClickFunction={this.incrementCounter} />
        <Result counter={this.state.counter} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

cards.js

const Card = (props) => {
	return (
  	<div style={{margin: '1em'}}>
      <img width="75" src={props.avatar_url} />
      <div style={{display: 'inline-block', marginLeft: 10}}>
        <div style={{fontSize: '1.25em', fontWeight: 'bold'}}>
          {props.name}
        </div>
        <div>{props.company}</div>
      </div>
    </div>
  );
};

let data = [
	{ name: "KryptykPhysh",
  	avatar_url: "https://avatars1.githubusercontent.com/u/328830?v=3",
    company: "KryptykPhysh Teq" },
  { name: "Summer Wherry",
  	avatar_url: "https://avatars0.githubusercontent.com/u/14178524?v=3",
    company: "null" },
]

const CardList = (props) => {
	return (
  	<div>
      {props.cards.map(card => <Card {...card} />)}
    </div>
  )
}

ReactDOM.render(<CardList cards={data}/>, mountNode);