title: How to display clicked component to another component
body: <p>I have a list of components using react hooks now I would like on clicking the component it should open the settings component and display the clicked component.</p>
  <p>Here is codesandbox: <a href="https://codesandbox.io/s/display-component-forked-fo6mb" rel="nofollow noreferrer">live demo</a></p>
  <p>here is How I display the components list in app.js</p>
  <pre><code>import * as data from &quot;./Components/CompList&quot;;
  import { useHistory } from &quot;react-router-dom&quot;;
  
  export default function App(props) {
    let components = data.complist;
    const history = useHistory();
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        {components.map(function (Component, id) {
          return (
            &lt;div
              className=&quot;comp-list&quot;
              key={id}
              onClick={() =&gt; {
                history.push(`/settings/${id}`);
              }}
            &gt;
              &lt;Component /&gt;
            &lt;/div&gt;
          );
        })}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>and here is how I display them in settings</p>
  <pre><code>import * as data from &quot;./CompList&quot;;
  import { useRouteMatch } from &quot;react-router-dom&quot;;
  
  const Settings = () =&gt; {
    const match = useRouteMatch();
    const { templateId } = match.params;
    let templates = data.complist;
  
    let SelecteComponent = templates.map(function (Component, idx) {
      if (idx === Number(templateId)) {
        return Component;
      }
      return Component;
    });
    console.log(&quot;selected&quot;, SelecteComponent);
    return (
      &lt;div className=&quot;selected-component&quot;&gt;
        &lt;SelecteComponent /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Settings;
  </code></pre>
  <p><strong>Unfortunately it's not displaying the clicked component in the settings component</strong></p>
  <p>What do I need to change to solve the problem?</p>