He mapeado un estado redux en mi aplicación y estoy mirando cuando selecciono el texto, creará un archivo console.log del texto. Mi objetivo final es usar esto con useSelector y enviar actualizaciones a la tienda Redux, pero esa es otra pregunta para otro día.

He creado el siguiente jsx:

 const searchResults = useSelector(state => state.jobsearch.roles.map(role => role.title)) const SearchResultsText = ({ text }) => { return ( <JobContainer> <JobSearchTypography> {text} </JobSearchTypography> </JobContainer> ); };

Y tenerlo dentro de mi aplicación como tal, ¡que funciona!

 <JobContainer > {searchResults && searchResults.length < 3 && searchResults.map((result) => (<SearchResultsText text={result}/>) )} </JobContainer>

Ahora también he creado la siguiente función, por ejemplo

 function handeClickRoleSelection() { console.log('you have clicked on') }

Cuando selecciono uno de los siguientes, me gustaría regresar en console.log, 'has hecho clic en', título, pero no estoy seguro de cómo hacerlo. He intentado aplicar handleClickRoleSelection en cada elemento del jsx pero nada.

Lo he probado con una etiqueta p básica y es funcional. ¿Dónde me estoy deslizando?