React rendering child components with passing props to child components

So I have a workspace component, rendering child <IndividualWorkspaceOverview />,

{requested ? (
        allWorkspace.map((e) => (
          <IndividualWorkspaceOverview
            key={e.user}
            detail={e.q1}
            user={e.user}
          />
        ))
      ) : (
        <div></div>
      )}

and <IndividualWorkspaceOverview /> returns

    <div>
      <button>{props.user}'s Workspace</button>
    </div>
  ); 

The issue comes when I want to implement where, when a user clicks on the button, it displays that user's workspace.

One solution I came up is, render only one <IndividualWorkspaceOverview />,pass the allWorkspace array to it , and set a if condition to either render buttons of a overview of workspaces, or a <IndividualWorkspace /> , set a handle click functions to those buttons and pass to each button a username as props ,when a button is clicked, the button will cause a re-render of <IndividualWorkspaceOverview /> and display <IndividualWorkspace /> associated with that buttons username.

I was wondering if there is a better way to implement this?



Read more here: https://stackoverflow.com/questions/64598642/react-rendering-child-components-with-passing-props-to-child-components

Content Attribution

This content was originally published by allen at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: