Select With Custom Option Components

character-option.jsx

const CharacterOption = ({ value, data, onSelect }) => {
  return (
    <div onClick={() => onSelect(value)}>
      <div className="char-avatar">
        <img src={data.avatar} />
      </div>

      <div className="char-name">
        {data.firstName} {data.lastName}
      </div>
      <div className="char-email">{data.email}</div>
    </div>
  );
};

select-form-with-custom-options.jsx

import React from 'react';
import { Select } from 'uniform';
import CharacterOption from './CharacterOption';

const selectOptions = [
  {
    value: 'lukeSkywalker',
    data: {
      firstName: 'Luke',
      lastName: 'Skywalker',
      email: 'lskywalker420@rebels.gov',
      avatar: 'l_skywalker.png',
    },
  },
  {
    value: 'hanSolo',
    data: {
      firstName: 'Han',
      lastName: 'Solo',
      email: 'twelveparsecs@dontshootfirst.com',
      avatar: 'h_solo.png',
    },
  },
  {
    value: 'jarJarBinks',
    data: {
      firstName: 'Jar Jar',
      lastName: 'Binks',
      email: 'totallynotasithlord@gungan.gov',
      avatar: 'jj_binks.png',
    },
  },
];

class SomeForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      favStarwarsCharacter: null,
    };
  }

  render() {
    return (
      <Select
        name="fav-star-wars-character"
        qaId="qa-fav-star-wars-character"
        id="fav-star-wars-character-select"
        options={selectOptions}
        customOption={CharacterOption}
        placeholder="Select your favorite Star Wars character"
        value={this.state.favStarwarsCharacter}
        onChange={selectedCharacter => this.setState({ favStarwarsCharacter: selectedCharacter.value })}
      />
    );
  }
}