I am learning React and I'm about a week into it. I want to build a dropdown and to learn React Semantic UI I thought I could begin by copying the code from their website here. I can't get it to look right even when copying the code as directly as possible. Can someone explain what the difference is that is making mine look wrong?

My code:

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

var options = [
    {
      text: 'Jenny Hess',
      value: 'Jenny Hess',
    },
    {
      text: 'ME',
          value: 'ME',
    }
]

const Reorder = () => (
  <Dropdown placeholder='Select Friend' fluid selection options={options} />
)

export default Reorder

Code example from the documentation:

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

import { friendOptions } from '../mon'
  // friendOptions = [
  //   {
  //     text: 'Jenny Hess',
  //     value: 'Jenny Hess',
  //     image: { avatar: true, src: '/assets/images/avatar/small/jenny.jpg' },
  //   },
//  ...
// ]


const DropdownExampleSelection = () => (
  <Dropdown placeholder='Select Friend' fluid selection options={friendOptions} />
)

export default DropdownExampleSelection

I am learning React and I'm about a week into it. I want to build a dropdown and to learn React Semantic UI I thought I could begin by copying the code from their website here. I can't get it to look right even when copying the code as directly as possible. Can someone explain what the difference is that is making mine look wrong?

My code:

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

var options = [
    {
      text: 'Jenny Hess',
      value: 'Jenny Hess',
    },
    {
      text: 'ME',
          value: 'ME',
    }
]

const Reorder = () => (
  <Dropdown placeholder='Select Friend' fluid selection options={options} />
)

export default Reorder

Code example from the documentation:

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

import { friendOptions } from '../mon'
  // friendOptions = [
  //   {
  //     text: 'Jenny Hess',
  //     value: 'Jenny Hess',
  //     image: { avatar: true, src: '/assets/images/avatar/small/jenny.jpg' },
  //   },
//  ...
// ]


const DropdownExampleSelection = () => (
  <Dropdown placeholder='Select Friend' fluid selection options={friendOptions} />
)

export default DropdownExampleSelection

• javascript
• reactjs
• semantic-ui-react

• This is what my code produces: i.imgur./0d6lHn3.png. This is what the example code produces: i.imgur./6n8vJIV.png. – tooquick Commented Jul 2, 2017 at 4:15
• Hi @TravisJonSchnider, just want to confirm if the avatar is still showing when you select an item on the dropdown. When expanding the selection, I can see the avatars, but when I clicked one of the option, the selected one is just showing plain text – Jaime Sangcap Commented Aug 26, 2017 at 12:04

1 Answer 1

It's probably because you didn't install the corresponding CSS package. Per the Usage page of the documentation:

Semantic UI CSS can be installed as a package in your project using NPM. You won't be able to use custom themes with this method.

$ npm install semantic-ui-css --save

After install, you'll need to include the minified CSS file in your index.js file:

import 'semantic-ui-css/semantic.min.css';

The CSS lives in a separate package, the JavaScript and React ponents like in the main package. You have to install and import the CSS package and files to have it apply the CSS to your ponents.