I have a user dashboard build using material-ui list. For each listItem i have a component for it. What I want is, when I click a list element, there is a section dedicated for switching the components. I am having trouble implementing this.Here is my code.I am not sure where to put onClick
handler. I will appreciate any lead. Even loggin when a particular listItem is clicked. Then I can go ahead and use react conditional rendering. In the picture below, when a user clicks All events, a component for that is rendered on the right. When MyEvents
is clicked, a component for it, is rendered.
Code:
UserTileData.js
export const profileFolderListItems = (
<div>
<ListItem button>
<ListItemIcon>
<SendIcon />
</ListItemIcon>
<Badge badgeContent={3} color='primary'>
<ListItemText primary='Events attending' />
</Badge>
</ListItem>
<ListItem button>
<ListItemIcon>
<CreateIcon />
</ListItemIcon>
<ListItemText primary='New Event' />
</ListItem>
</div>
)
UserProfilePage.js
class UserProfile extends Component {
constructor (props) {
super(props)
this.state = {
componentTodisplay: null
}
}
render () {
const { classes } = this.props
return (
<div>
<div className={classes.root}>
<Drawer
variant='permanent'
classes={{
paper: classes.drawerPaper
}}
>
<div className={classes.toolbar} />
<List >{eventsFolderListItems}</List>
<Divider />
<List>{profileFolderListItems}</List>
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
{/* componentToDisplay goes here */}
</main>
</div>
</div>
)
}
}
UserProfile.propTypes = {
classes: PropTypes.object.isRequired
}
export default withStyles(styles)(UserProfile)
Added a couple of change to your code. Now it looks like this -
UserTileData.js
export class profileFolderListItems {
constructor(props){
super(props);
}
render() {
return (
<div>
<ListItem button>
<ListItemIcon>
<SendIcon />
</ListItemIcon>
<Badge badgeContent={3} color='primary'>
{/* notice the onClick handler here */}
<ListItemText primary='Events attending' onClick={() => this.props.onSelectChange('events')}
</Badge>
</ListItem>
<ListItem button>
<ListItemIcon>
<CreateIcon />
</ListItemIcon>
<ListItemText primary='New Event' />
</ListItem>
</div>
)
}
}
UserProfile.js
import { profileFolderListItems, eventsFolderListItems} from './UserTitleData';
class UserProfile extends Component {
constructor (props) {
super(props)
this.state = {
value: null
};
this.handleSelectOption = this.handleSelectOption.bind(this);
}
handleSelectOption(value) {
this.setState({
value: value
});
}
render () {
const { classes } = this.props;
return (
<div>
<div className={classes.root}>
<Drawer
variant='permanent'
classes={{
paper: classes.drawerPaper
}}
>
<div className={classes.toolbar} />
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
{/* notice the conditional rendering here */}
{this.state.value === 'events' ?
(<List>
<profileFolderListItems
onSelectChange={this.handleSelectOption}
/>
</List>) :
this.state.value === 'profile' ?
(
<List>
<profileFolderListItems
onSelectChange={this.handleSelectOption}
/>
</List>
) : null}
</main>
</div>
</div>
)
}
Basically what I am doing here is -
ListItemText
to the onClick handler. (it should be unique for each of the options. I am passing events
here only) Lift the value to the parent component - UserProfilePage
. (React's single source of truth, unless you are using Redux)
Conditional rendering based on the value passed.
Hope you got the idea.
You should use React Router (or any similar routing library).
https://github.com/ReactTraining/react-router
https://reacttraining.com/react-router/web/example/basic
In the picture below, when a user clicks All events, a component for that is rendered on the right. When MyEvents is clicked, a component for it, is rendered.
It would probably also be helpful if the user can browse to /my-events
and /all-events
, or bookmark them. What about when the user presses the back/forward buttons in their browser?
Using a routing library solves all of these problems (and more!) for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.