Tengo el código a continuación, lo que quiero que haga es: cuando hago clic en el botón de cuestionarios, el div con renderComponent muestra la lista de cuestionarios como en la función QuizList, cuando presiono el botón Miembros quiero el mismo div para representar el lista de miembros como en la función MemberList, pero no puedo hacerlo, ¿podría ayudarme con eso?
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> )} };En el método de renderizado, no proporciona ningún parámetro a renderComponent . Entonces, cada vez que se devuelva el caso default , porque el component del parámetro no está undefined .
Almacenaría la selección actual dentro del estado del componente y la configuraría con los botones correspondientes.
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> )} }