how can i reuse parent component and give children props in react?

Question

const Group = ()=>{

const someAction = ()=>{

}

return <Animal action = {someAction}/><
}

My Code looks like this, and I want to reuse this Group function component and change only Animal component,

const Group = ()=>{

const someAction = ()=>{

}

return <Fish action = {someAction}/><
}

const Group = ()=>{

const someAction = ()=>{

}

return <Dog action = {someAction}/><
}

All props that is given to Fish, Dog component is same. So I want to reuse Group component Like this

<div>
  <Group component={<Fish/>} />
  <Group component={<Dog/>}/>
</>

But the problem is props that is given to child component.

How can I solve this?

Answer 1

Try this:

const Group = ({ component }) => {
  const Animal = component
  const someAction = () => {}
  return <Animal action={someAction} />
}

And then use it like so:

<>
  <Group component={Fish} />
  <Group component={Dog} />
</>