Upwork

icon-active.svg

icon.svg

picker.js

import React, { Component } from 'react';
import styles from './styles.sass';
import icon from './icon.svg';
import iconActive from './icon-active.svg';
import cx from 'classnames';

export default class Picker extends Component {
  constructor() {
    super();
    this.state = {
      size: 'XS',
      availableSizes: ['XS', 'S', 'M', 'L', 'XL'],
    };
  }

  onClick = (size) => {
    this.setState({size: size});
  }

  renderItem = (size, index) => {
    const width = 60 + index * 20;
    const active = this.state.size === size;
    const className = cx(styles.item, {[styles.active]: active});
    const src = active ? iconActive : icon;

    return(
      <div key={size} onClick={this.onClick.bind(this, size)} className={className}>
        <img width={`${width}px`} src={src} />
        {size}
      </div>
    );
  }

  render() {
    return (
      <div>
        Your size: {this.state.size}
        <hr/>
        {this.state.availableSizes.map(this.renderItem)}
      </div>
    );
  }
}

styles.sass

.item
  margin: 20px
  display: inline

.active
  color: white