I have the code below, what i want it to do is: when i click the quizzes button , the div with renderComponent in it renders the list of quizzes as in QuizList function, when i press Members button i want the same div to render the list of members as in MemberList function, but i can't manage to do it, could you help me with it?
class GroupPage extends React.Component {
constructor(props){
super(props);
this.state={
members:[],
quizzes:[]
}
}
QuizList = () =>{
const {quizzes} = this.state;
return(
<div>{
quizzes.map(({id,...otherQuizProps}) => (
<QuizItem key={id} id={id}{...otherQuizProps}/>
))
}
</div>
)
}
MemberList = () =>{
const {members} = this.state;
return(
<div>{
members.map(({id,...otherMemberProps}) => (
<GroupMember key={id} id={id}{...otherMemberProps}/>
))
}
</div>
)
}
renderComponent = (component) =>{
switch(component){
case "QuizList":
return <this.QuizList/>
case "MemberList":
return <this.MemberList/>
default:
return <this.QuizList/>
}
}
render(){
const {quizzes,members} = this.state;
return(
<div className='group-page'>
<div className='group-controls'>
<div className='group-buttons'>
<button onClick={}>Quizzes</button>
<button onClick={}>Members</button>
</div>
</div>
<div>
{this.renderComponent()};
</div>
</div>
)}
};
In the render method you don't provide any parameter to renderComponent. So everytime the default case will be returned, because the parameter component is undefined.
I would store the current selection inside the state of the component and set it with the buttons accordingly.
constructor(props){
super(props);
this.state={
members:[],
quizzes:[],
currentMode: 'QuizList',
}
}
...
render(){
const {quizzes,members, currentMode} = this.state;
return(
<div className='group-page'>
<div className='group-controls'>
<div className='group-buttons'>
<button onClick={()=>this.setState({currentMode:'QuizList'}) }>Quizzes</button>
<button onClick={()=>this.setState({currentMode:'MemberList'}) }>Members</button>
</div>
</div>
<div>
{this.renderComponent(currentMode)};
</div>
</div>
)}
}