title: React JS, On click Show dropdown for element
body: <p>My question is about trying to show a static dropdown on click of a span element, But How can i show dropdown only for clicked element(and close the dropdown which is open) without appending any new DOM. Can someone help on this?
  What i tried so far is.</p>
  
  <pre><code>const SubSubComponent = props =&gt; {
    let dropdown = () =&gt; {
      if (props.openDropDownFlag) {
        return (
          &lt;ul style={{ listStyle: 'none', border: '1px     solid #000' }}&gt;
            &lt;li&gt;User data &lt;/li&gt;
            &lt;li&gt;Edit&lt;/li&gt;
          &lt;/ul&gt;
        );
      }
    };
  
    return (
      &lt;div&gt;
        &lt;span onClick={props.clickHandler}&gt;
          {props.name}
        &lt;/span&gt;
        &lt;div&gt;
          {dropdown}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  const SubComponent = props =&gt; {
    let returnVal = props.list.length
      ? props.list.map((item, index) =&gt; {
          return (
            &lt;SubSubComponent
              key={index}
              name={item}
              openDropDownFlag={props.openDropDownFlag}
              clickHandler={props.openDropDown}
            /&gt;
          );
        })
      : null;
  
    return (
      &lt;div&gt;
        {returnVal}
      &lt;/div&gt;
    );
  };
  
  class Main extends React.Component {
    constructor() {
      super();
      this.state = {
        arrayList: ['Matt', 'Maxx', 'Newton'],
        openDropDownFlag: false,
      };
      this.openDropDown = this.openDropDown.bind(this);
    }
    openDropDown = () =&gt; {
      //code to show dropdown
      debugger;
      this.setState({
        openDropDownFlag: true,
      });
    };
    render() {
      return (
        &lt;div&gt;
          &lt;SubComponent
            list={this.state.arrayList}
            openDropDown={this.openDropDown}
            openDropDownFlag={this.state.openDropDownFlag}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  render(&lt;Main /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>I tried the same in <a href="https://codesandbox.io/s/VPowom7EO" rel="nofollow noreferrer">Code Sandbox</a></p>