Console.Logging Mapped Data in React

Question

It appears I cannot console.log any selection from an onClick for this React component. I am trying to basically achieve the following.

https://codesandbox.io/s/great-ardinghelli-6seko?file=/src/demoComponent.jsx

The data is fetched from redux and appears in the frontend (I have this working).

I would like to achieve that when you select a line, it just console.logs('you have selected'role).

However it doesn't appear I can get ANY data to trigger on an onClick when it's a mapped data source.

I have implemented a p tag which fires and works as expected.

See the following refined code:

import React, { useRef } from "react";
import styled from "styled-components";

const SearchContent = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1em;
    overflow-y: auto;
`;

const JobContainer = styled.div`
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5px 5px;
`;

export function SearchBarTrialRedux(props) {

  const inputRef = useRef();
  const [term, setTerm] = useState("")



  const handleClickRole = () => {
      console.log("Hello, you have selected" )
  }

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

  const SearchResultsText = ({ text }) => {
      return (
          <JobContainer onClick={()=> {
              console.log("Hello")
          }}>
              <JobSearchTypography 
              >
                  {text}
              </JobSearchTypography>
        </JobContainer>
      );
    };

    
  return (
          <SearchContent>
              <JobContainer >
                {searchResults && searchResults.length < 3 && searchResults.map((result) =>
                    (<IndividualContainer handleClick={handleClickRole}>
                        <SearchResultsText text={result}/>
                    </IndividualContainer>
                    )
                )}
              </JobContainer>
              <p onClick={handleClickRole}>
                fff
              </p>
         </SearchContent>
        )

Does anyone know why this doesn't work + how to achieve the solution? I'm a little lost here!

Answer 1

As it can be seen from your code snippet the handleClickRole function just prints to the console the message "Hello, you have selected". There is no variable passed on it in order to print it. This can be changed like this:

const handleClickRole = (role) => {
  console.log(`Hello, you have selected ${role}`);
}

Furthermore, the way you call the above function on the onClick event I think is incomplete. It would be better if it looked like this:

<p onClick={() => handleClickRole(role)}>fff</p> // considering that you want to pass a variable with the role

or

<p onClick={() => handleClickRole()}>fff</p> // without a variable

Please also look at the below example:

import { useState } from "react";

export default function App() {
  const [myInput, setMyInput] = useState("");
  const [isButtonClicked, setIsButtonClicked] = useState(false);
  const handleChange = (event) => {
    setIsButtonClicked(false);
    setMyInput(event.target.value);
  };
  const handleClick = () => {
    setIsButtonClicked(true);
    console.log(myInput);
  };

  return (
    <div className="App">
      <input
        onChange={handleChange}
        id=".myInput"
        placeHolder="Enter Something"
      />

      <button
        style={{
          display: "block",
          width: "100px",
          margin: "10px auto",
        }}
        onClick={() => handleClick()}
      >
        OK
      </button>

      <p style={{ fontWeight: "bold" }}>
        The entered value is:
        <span style={{ fontWeight: "400" }}>
          {isButtonClicked ? ` ${myInput}` : null}
        </span>
      </p>
    </div>
  );
}

Answer 2

the <IndividualContainer>...</IndividualContainer> is a component created by you right?

if yes, then you will have to have to call the onClick function in the component like so: inside the IndividualContainer component

  ...

   // the outer container

   <div onClick={props.handleClick}>
      ...
   </div>

  ...

lemme know if it works

I just edited my answer now