score:5

Accepted answer

Since Search is a component, the onClick event handler has to be passed onto the element inside it. onClick is as any other prop on a component and has no default meaning.

const Search = ({onClick}) => {
  return (
    <Container onClick={onClick}>
      <Icon icon={faSearch} />
    </Container>
  )
}

score:2

you should add that onClick props in Search component. You are not utilising that props. If you want on click on let say on icon element then you should do something like this. 


const Search = (props) => {
  return (
    <Container>
      <Icon icon={faSearch} onClick={props.onClick} />
    </Container>
  )
}

If you want it to add on Container element then you should do like this.


const Search = (props) => {
  return (
    <Container onClick={props.onClick}>
      <Icon icon={faSearch} />
    </Container>
  )
}

score:2

This is because the custom Search component does not implement an onClick callback prop. Extending Search with the following should resolve the issue:

/* Add props argument */
const Search = (props) => {
  return (
    {/* Add onClick prop to span, and pass through supplied onClick prop */}
    <Container onClick={props.onClick}>
      <Icon icon={faSearch} />
    </Container>
  )
}

Related Query

More Query from same tag