Usando React.js, estoy tratando de filtrar la tabla de proyectos por tamaño de proyecto, pero hay un problema: el estado siempre está un paso atrás

aquí está mi método de controlador

 handleProjectSize = (projectSize) => { this.setState({ selectedProjectSize: projectSize }); console.log('selected: ', this.state.selectedProjectSize); console.log('clicked: ', projectSize); console.log('-----------------------------------------');

};

y aquí hay una condición para filtrar los proyectos si hago clic en un filtro - en el método de renderizado

 const filterdProjects = this.selectedProjectSize ? projects.filter((ps) => ps.projectSize._id === selectedProjectSize._id) : projects;

y aquí está mi elemento

 <ul className='list-group'> {projectSizes.map((projectSize) => ( <li className='list-group-item' key={projectSize._id} onClick={() => this.handleProjectSize(projectSize)} > {projectSize.name} </li> ))} </ul>

Nota importante: todo este código está en un componente

en esta captura de pantalla, puede ver los valores en la consola cuando presioné todos los proyectos, pero la variable seleccionada aún no está definida y luego, cuando hago clic en el principal, el seleccionado sigue siendo todo el proyecto ... y eso significa que hay un retraso de un paso