Child component onClick parameter doesn't work in parent component

Question

I set button onClick as a parameter in the child component and drag and use onClick in the parent component.

The child component Room .

type Props = {
 items?: [];
 onClick?: any; 
}

const Room = ({ onClick, items: [] }: Props) => {

  return (
  <div>
    {items.length ? (
    <>
     {items.map((item: any, index: number) => {
      return (
       <>
         <button key={index} onClick={() => { console.log('hi'); onClick }}>{item.name}</button>
       </>
   )
  }
    </>    
  )
  </div>
 )
}

This is the parent component.

const LoadingRoom = () => {

const handleWaitingRoomMove = (e: any) => {
      e.preventDefault();
      console.log('Hello Move')
    }


  return (
  <>
    <Room
     items={[
           {
              name: "Waiting Room",
              onClick: {handleWaitingRoomMove}
            },
            {
              name: "Host Room",
            },
  ]}
  >
     
    </Room>
  </> 
)
}

I want to call parent component's onClick handleWaitingRoomMove but it's not getting called.

However, console.log('hi') on the button is called normally whenever the button is clicked. Only button is not called. Do you know why?

Sachila Ranawaka · Accepted Answer · 2022-12-21 10:30:10Z

1

onlick is a attribute to the child element. so move it outside of the items array

 <Room
    
     onClick={handleWaitingRoomMove}
     items={[
           {
              name: "Waiting Room",
            },
            {
              name: "Host Room",
            },
  ]}
  >

In the child, missing () for onClick

onClick={(ev) => { console.log('hi'); onClick(ev) }}

Demo

answered Dec 21, 2022 at 10:30

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

minsu123 Over a year ago

Thanks for the answer, but onClick should be paired with name .

minsu123 Over a year ago

Called when the Waiting Room name button is clicked, and called differently when the Host name button is called.

Sachila Ranawaka Over a year ago

see the updated demo

Jay · Accepted Answer · 2022-12-21 10:36:50Z

1

You are passing onClick in items, not direct props

<button key={index} onClick={item.onClick}>{item.name}</button>

so your component will be

type Props = {
 items?: [];
}

const Room = ({ items: [] }: Props) => {

  return (
  <div>
    {items.length ? (
    <>
     {items.map((item: any, index: number) => {
      return (
       <>
         <button key={index} onClick={item.onClick}>{item.name}</button>
       </>
   )
  }
    </>    
  )
  </div>
 )
}

edited Dec 21, 2022 at 10:36

answered Dec 21, 2022 at 10:31

Jay

3,1392 gold badges16 silver badges31 bronze badges

Comments

Andy · Accepted Answer · 2022-12-21 10:55:53Z

It would probably be more advantageous to have one handler that does the work, and use that to identify each room by type (using a data attribute to identify the rooms). That way you keep your data and your component logic separate from each other. If you need to add in other functions at a later stage you can.

const { useState } = React;

function Example({ data }) {

  // Handle the room type by checking the value
  // of the `type` attribute
  function handleClick(e) {
    const { type } = e.target.dataset;
    switch (type) {
      case 'waiting': console.log('Waiting room'); break;
      case 'host': console.log('Host Room'); break;
      case 'guest': console.log('Guest Room'); break;
      default: console.log('Unknown room'); break;
    }
  }

  // Keep the room data and the handler separate
  return (
    <div>
      {data.map(obj => {
        return (
          <Room
            key={obj.id}
            data={obj}
            handleClick={handleClick}
          />
        );
      })}
    </div>
  );

}

// Apply a data attribute to the element
// you're clicking on, and just call the handler
// `onClick`
function Room({ data, handleClick }) {
  const { type, name } = data;
  return (
    <button
      data-type={type}
      onClick={handleClick}
    >{name}
    </button>
  );
}

const data = [
  { id: 1, type: 'waiting', name: 'Waiting Room' },
  { id: 2, type: 'host', name: 'Host Room' },
  { id: 3, type: 'guest', name: 'Guest Room' }  
];

ReactDOM.render(
  <Example data={data} />,
  document.getElementById('react')
);

button:not(:last-child) { margin-right: 0.25em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Collectives™ on Stack Overflow

Child component onClick parameter doesn't work in parent component

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related