Why nothing happens on onClick in my component?

user_4345713 0
Viewed 225

I have this component named List, inside I get the data via props, and then render it based on the user's input in search. I want to trigger a function when you click on the ListItem component, but nothing happens. I don't get anything in my console or anything.

Here is my code:

export default function List(props) {

const [searchValue, setSearchValue] = useState("");
const [data, setData] = useState([]);

const {SelectedId, changeSelectedId} = useContext(SelectedRestaurantContext)

useEffect(() => {
    setData(props.data)
}, [props.data])


function handleSearch(e) {
    setSearchValue(e)
}    

if (data) {

    function handleSelectRestaurant(id) {
        console.log(id)
    }

    let items = data
        .filter(data => {
            if(searchValue === null) {
                return data;
            } else if(data.title.toLowerCase().includes(searchValue.toLowerCase()) || data.description.toLowerCase().includes(searchValue.toLowerCase())) {
                return data;
            }

            return null
        })
        .map((data, i) =>        
                <ListItem 
                    key={i} 
                    title={data.title} 
                    description={data.description} 
                    image={data.image}
                    onClick={() => handleSelectRestaurant(data.id)}
                />
        );

    return (
        <div className="List">
            <Search value={searchValue} onChange={handleSearch} />
            <div className="List__container">
                {items}
            </div>
        </div>
    );    
} else {
    return(
        <div className="List">
            <span className="loading">Nalagam...</span>
        </div>
    )
}

Here is code from ListItem component:

import React from "react";

export default function ListItem(props) {
    return (
        <div className="List__item">
            <div className="List__item--image" style={{
                'backgroundImage': 'url(' + props.image + ')'
            }}>
            </div>
            <div className="List__item--info">
                <div className="info__title" title={props.title}>
                    <span className="info__title--text">{props.title}</span>
                    <span className="item__status item__status--open"></span>
                </div>
                <span className="info__description">
                    {props.description}
                </span>
            </div>
            <div className="List__item--action">
                    <div></div>
                </div>
        </div>
    );
}

react-hooks reactjs
2 Answers

You aren't calling the onClick function on the ListItem component. When you do this:

<ListItem 
   key={i} 
   title={data.title} 
   description={data.description} 
   image={data.image}
   onClick={() => handleSelectRestaurant(data.id)}
/>

You are passing the onClick function as a prop to the component, you should add that to some element that has a onClick callback, like a button. Div also can have a onClick gunction, but isn't a good way of doing it, if you can, use a button.

user_134415540

You wont get any output because, the component is not inside return function. ie. Wrap your component ListItem inside return statement like you did here:

return(
    <div className="List">
        <span className="loading">Nalagam...</span>
    </div>
)
user_109495460
Related