React "base class"/ inheritance - reactjs

Question

I'm pretty new to React,
And I was given a simple home assignment.
I was asked to create 3 kinds of a clickable circle component.
The JSX is common to all (SVG),
But their
size
background color
onClick callback
are different.
What is the correct way nowadays (2019, React 16) to get such a common base class/
interface in React ?
HOC ? React Hooks ? some other way ?
Say this is my "base" Circle component
(Please ignore the hard coded props):
export default function Circle(props) {
return (
<svg height="100" width="100">
<circle cx="50" cy="50" r="26" fill="#9cc6d4" />
<circle
cx="50"
cy="50"
r="20"
stroke="#FFF"
strokeWidth="1"
fill="none"
/>
</svg>
);
I want to make myself clear:
I've only 3 different types of that basic Circle
(Say Red, Blue and Yellow...)
And I need to put them on screen according
to a JSON.
I don't want to DRY and create
3 different classes: RedCircle, BlueCircle and YellowCircle...
which eventually will be based on the same JSX
Your help is highly appreciated.

Answer 1

You can easily do these cutomizations with props..
const {size, onClick, bgColor} = props;
// now use the size, onClick and bgColor props in your JSX markup
return (
<svg height="100" width="100">
<circle cx="50" cy="50" r="26" fill="#9cc6d4" />
<circle
cx="50"
cy="50"
r="20"
stroke="#FFF"
strokeWidth="1"
fill="none"
/>
</svg>
);
Using the Circle component would look like
<Circle size={'40'} onClick={()=>{ console.log('im red circle'}) bgColor={'red'} />
<Circle size={'35'} onClick={()=>{ console.log('im green circle'}) bgColor={'green'} />

Answer 2

You can pass these infos, by using the props parameter of the function component.
Your component would look something like that:
export default function Circle(props) {
return (
<svg height={props.size} width={props.size}>
<circle cx="50" cy="50" r="26" fill={props.color} />
<circle
cx="50"
cy="50"
r="20"
stroke="#FFF"
strokeWidth="1"
fill="none"
/>
</svg>
);
}
Then, when used in parent components:
<Circle size={yourSize} color={yourColor}/>
In this case, size etc... would be available in the function as props.size etc...
You can do the same and pass event handlers like onClick etc...
Reference:
https://reactjs.org/docs/components-and-props.html