Passing props in Semantic UI React's dropdown component

Question

I'm new to React and am using the library: Semantic-UI-React.

I'm trying to use the Dropdown component from Semantic-UI-React but I am unable to pass my props. I get an error when I console.log my props anywhere in the example code.

The Semantic-UI-React dropdown example looks different than my normal react code. It only has an export. My normal code has a render and a return section.

http://react.semantic-ui.com/modules/dropdown

My parent page gets the child like this:

<div className="ui grid">
    <TagFilter handleTagChange={this.handleTagChange} tagsFilterValue={this.state.tagsFilterValue} />
</div>

My TagFilter component looks like this:

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

import { friendOptions } from '../common'

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

export default DropdownExampleSelection

I don't know if I can rewrite the code in the example to look more like the rest of my code.

Answer 1

It is not clear what you are trying to achieve. I will assume that there is a TagFilterComponent and you want to render Dropdown components in it.

I suggest that you create a component of your own, let's call it TagDropdown. You pass this the props you want and you add the functions you need. Then for its render-function - you use the DropDown components as you want them. By the code you provided

That is, you extend the DropDown by composition.

Something like:

class TagDropdown extends React.Component {
    constructor(props) {
        super(props)
    }
    // Add your functions and handlers, if any. 
    render() {
      return (
        <Dropdown /* <add your props and options> */ />
      )
    }
}

Now your TagFilterComponent can render a <TagDropdown> and you can pass the props of your choice.