I've mapped some redux state across my app and am looking to when I select the text, it will create a console.log of the text. My eventual goal is to use this with useSelector and dispatch updates to the Redux store, but that's another question for another day.

I have created the following jsx:

    const searchResults = useSelector(state => state.jobsearch.roles.map(role => role.title))

    const SearchResultsText = ({ text }) => {
        return (
            <JobContainer>
                <JobSearchTypography>
                    {text}
                </JobSearchTypography>
          </JobContainer>
        );
      };

And have it within my app as such, which works!

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

Now I have also created the following function e.g

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

When I select on one of the following, i'd like to return in console.log, 'you have clicked on', title - but am unsure how to do this. I have tried applying the handleClickRoleSelection on each element of the jsx but nothing.

I have tried it with a basic p tag and it is functional. Where am I slipping up?