How can I prevent SQL injection in PHP?

I have two td they have similar features, should I use inheritance or association?

Acothley

I created a basic cell component:

export default function BasicCell(props){
  return (
    <td
      contentEditable={(props.contentEditable)}
      className={props.className}
      onBlur={props.onBlur}
      onCopy={props.onCopy}
      onMouseDown={props.onMouseDown}
      onMouseEnter={props.onMouseEnter}
      onMouseLeave={props.onMouseLeave}
      onPaste={props.pasteData}
      suppressContentEditableWarning={true}>
      {props.children}
    </td>
  );
}

Based on the basic cell I have a shift cell:

import BasicCell from './BasicCell';
export default function ShiftCell(props) {
  let className = 'shiftCell ' + props.className;
  function deHighLight(e) {
    if (props.setIsHighLightRow) {
      props.setIsHighLightRow(false);
    }
    if (props.updateHighLightCellIndex) {
      props.updateHighLightCellIndex(-1);
    }
  }
  function highLight(e) {
    if (props.setIsHighLightRow) {
      props.setIsHighLightRow(true);
    }
    if (props.updateHighLightCellIndex) {
      props.updateHighLightCellIndex(e.target.cellIndex - 1);
    }
  }
  return (
    <BasicCell
      contentEditable={props.contentEditable}
      className={className}
      onMouseEnter={highLight}
      onMouseLeave={deHighLight}
    >
      {props.children}
    </BasicCell>
  );
}

Now, based on the ShiftCell component, I would like to create an EditableShiftCell component, which also has mouseEnter and mouseLeave event handler, both event listeners need to perform some tasks and execute the ShiftCell mouseEnter and mouseLeave event handler. Is there any best practice for creating the EditableShiftCell component?

Should I use inheritance or association?