I've grabbed some data from redux and am mapping to a component.
If I console.log the text attribute, I do recieve all the data available. See below: https://gyazo.com/ae7167952d14623be30f80b69cc20d5c
However I would like to link this to an onClick event. E.g if I click on 'Data Analyst', this will console.log -> Data Analyst. This however is not functioning and I am getting zero response from these events.
What is incorrect on my syntax?
const searchResults = useSelector(state => state.jobsearch.roles.map(role => role.title))
const SearchResultsText = ({ text }) => {
console.log(text)
return (
<JobContainer onClick={() => console.log(text)}>
<JobSearchTypography
>
{text}
</JobSearchTypography>
</JobContainer>
);
};
When it's in the app itself, it looks as such:
<JobContainer >
{searchResults && searchResults.length < 3 && searchResults.map((result) =>
(<IndividualContainer >
<SearchResultsText text={result}/>
</IndividualContainer>
)
)}
</JobContainer>
If your text is inside JobSearchTypography then you can try it something like this-
<JobSearchTypography onClick={(e)=>console.log(e.target.innerHTML)}>
{text}
</JobSearchTypography>