title: How can I pass state to Tab render method in semantic ui react?
body: <p>I'm using Tab from <a href="https://react.semantic-ui.com/modules/tab/#usage-active-index" rel="nofollow noreferrer">SUIR</a>
  I'm trying to pass some state data into one of the "panes" and use the <code>&lt;Dropdown&gt;</code> module to render that state data. Do I need to pass down via props, or something else?</p>
  
  <p>I want to render a dropdown that's specific to <code>Tab 2</code>. I'm really just wondering how to pass state data to the render method of the panes. I was thinking maybe move the render method out of <code>panes = [{},{},{}]</code> and put it in <code>render()</code> of the <code>App</code>. I'm not sure the best approach here.</p>
  
  <p><a href="https://codesandbox.io/s/40jomz9nm0" rel="nofollow noreferrer">Codesandbox</a> of below code.</p>
  
  <pre><code>const panes = [
    { menuItem: "Tab 1", render: () =&gt; &lt;Tab.Pane&gt;Tab 1 Content&lt;/Tab.Pane&gt; },
    { menuItem: "Tab 2", render: () =&gt; &lt;Tab.Pane&gt;Tab 2 Content&lt;/Tab.Pane&gt; },
    { menuItem: "Tab 3", render: () =&gt; &lt;Tab.Pane&gt;Tab 3 Content&lt;/Tab.Pane&gt; }
  ];
  
  const MockAdapter = require("axios-mock-adapter");
  const mock = new MockAdapter(axios);
  
  mock.onGet("/dataschemas").reply(200, {
    data: [
      {
        id: "2",
        selfUri: "/dataschemas/2",
        type: "DataSchema",
        name: "Book Catalog"
      },
      {
        id: "3",
        selfUri: "/dataschemas/3",
        type: "DataSchema",
        name: "Business Articles"
      }
    ]
  });
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = { activeIndex: 1, dataschemas: [], dataSchemaName: "" };
    }
  
    handleRangeChange = e =&gt; this.setState({ activeIndex: e.target.value });
    handleTabChange = (e, { activeIndex }) =&gt; this.setState({ activeIndex });
  
    async componentDidMount() {
      await this.getSchemas();
    }
  
    getSchemas = async () =&gt; {
      try {
        const { data } = await axios.get("/dataschemas");
        console.log(data);
        const dataschemas = data.data;
  
        this.setState({ dataschemas: dataschemas });
  
        console.log("This is the dataschema list:", dataschemas);
      } catch (error) {
        console.error(Error(`Error fetching results list: ${error.message}`));
      }
    };
  
    handleSchemaChange = e =&gt; {
      //handle data schema dropdown change
    };
  
    // Example of dropdown using dataschemas state
  
    render() {
      const { activeIndex, dataschemas, dataSchemaName } = this.state;
  
      return (
        &lt;div&gt;
          &lt;div&gt;activeIndex: {activeIndex}&lt;/div&gt;
          &lt;input
            type="range"
            max="2"
            value={activeIndex}
            onChange={this.handleRangeChange}
          /&gt;
          &lt;Tab
            panes={panes}
            activeIndex={activeIndex}
            onTabChange={this.handleTabChange}
          /&gt;
          &lt;Dropdown
            placeholder="Select data schema"
            scrolling
            clearable
            fluid
            selection
            search
            noResultsMessage="Try a different Search"
            multiple={false}
            options={dataschemas.map(schema =&gt; {
              return {
                key: schema.id,
                text: schema.name,
                value: schema.name
              };
            })}
            header="PLEASE SELECT A DATASCHEMA"
            value={dataSchemaName}
            onChange={this.handleSchemaChange}
            required
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>