Component output by pressing the ReactJS button using the props - reactjs

Question

I have 2 buttons, when I click on one of them, the component will be displayed in tr className = "info". The code is made so that it is universal, if there are 50 different components, then there will be 50 different buttons. And the active button will change the class. I'm trying to do it now with the help of a props, I'm just learning, tell me, please, where is the mistake?
import React, { Component } from 'react';
import './App.css';
import Donald from '/.Donald';
import John from '/.John';
const Counter =({buttonType,id})=>{
const {
buttonType,
children,
} = props;
return (
<div
className = {`${buttonType}`}
onClick={id}
>
{children}
</div>
);
}
Counter.defaultProps={
className = 'notActive'
}
class MyName extends Component {
state = {
array:[
{id:1,component:<Donald/>, name:"My name Donald"},
{id:2,component:<John/>, name:"My name John"},
],
};
render() {
const selectedElement = this.state.array.find(item => item.id === this.state.currComponentId);
return(
<table>
<tbody>
<tr className="trButton">
{
this.state.array.map( (element) => {
return (
<Counter>
<td
className={'active'}
onClick={ () => this.element.id}
>{element.name}
</td>
</Counter>
)
})
}
</tr>
<tr className="info">
{selectedElement.component}
</tr>
</tbody>
</table>
)
}
}
export default MyName;

Answer 1

I see couple of issues with the code
(1) Firstly, I think you are using incorrect path for import these components i.e. Use ./Donald instead of /.Donald (notice the . before / not after), similarly './John'.
(2) Secondly you're not setting initial value for currComponentId in state. Lets set that too
state = {
array:[
{id: 1, component: <Donald/>, name:"My name Donald"},
{id: 2, component: <John/>, name:"My name John"},
],
currComponentId: 1
};
(3) Also I think you are trying to change the currComponentId in onClick. So it will be
<Counter>
<td
className={'active'}
onClick={ () => this.setState({currComponentId: element.id})}
>
{element.name}
</td>
</Counter>