CODEWITHSUNDEEP
javascriptreactjsbuttononclick
wingad
wingad

Reputation: 23

Onclick Button is not being called React

I have this component that processes a card and when you click it redirects you to a past route but your OnClick is not working. I wonder if I could be going wrong

  function Characters({
  characters,
  getAllCharacters,
  filterCharacters,
}) {
  const history = useHistory();

  useEffect(() => {
    characters.length === 0 && getAllCharacters();
  }, [getAllCharacters]);

  return (
    <Fragment>
      <Header />
      <Search characters={characters} />
     { inputCharacters !== "" && filterCharacters.length > 0 ? (
        <ListContainer>
          {filterCharacters.map((characters) => (
            <CardItem
              onClick={() => {
                history.push(`/characters/${characters.id}`, {
                  params: { characters },
                });
              }}
              key={characters.id}
              name={characters.name}
              images={
                characters.thumbnail.path + "." + characters.thumbnail.extension
              }
            />
          )}
        </ListContainer>

Component CardItem:

 export default function CardItem(props) {
  return (
    <Container url={props.images}>
      <Content>
        <p>{props.name}</p>
      </Content>
    </Container>
    
  );
}

Upvotes: 0

Views: 41

Answers (1)

Viet
Viet

Reputation: 12777

Because you are not using onClick in the CardItem. You just update like this:

<p onClick={props.onClick}>{props.name}</p>

If Container or Content support onClick, you cant put onClick={props.onClick} in this component like a prop

Upvotes: 1

Related Questions