Nothing happens when onclick is pressed on a SVG icon

Question

I have the following <FontAwesomeIcon data-testid="add-ma-detail-row-one" onClick={() => addMaDetailRow(1)} icon={faPlusCircle} /> which calls the following fuction

const [toggleMADetailsRowOne, setToggleMADetailsRowOne] = useState(false);
const addMaDetailRow = (index) => {
    if (index === 1) {
      setToggleMADetailsRowOne(true);
    } else {
      setToggleMADetailsRowTwo(true);
    }
  };

which based on the value will display a element for example

{toggleMADetailsRowOne ? (
                                <React.Fragment>
                                  <TextField
                                    inputRef={register}
                                    name="mAPort1"
                                    className={classes.textField}
                                    InputProps={{ disableUnderline: true }}
                                    fullWidth
                                  />
                                  <p className="required-input">{errors.mAPort1 && errors.mAPort1.message}</p>
                                </React.Fragment>
                              ) : (
                                <React.Fragment />
                              )}

I get the svg button with the following const actionButton = getByTestId('add-ma-detail-row-one'); and i click on the button fireEvent.click(actionButton); . The element is not displayed for some reason. Not sure why, any helped would be much appreciated. but for some reason

Answer 1

<FontAwesomeIcon /> is a custom component, adding onClick will not work if the creator of that component did not pass all properties directly to the rendered child, you have to check what props that component expects (maybe it has another prop which is passed to element inside as onClick method (for example clickHandle ), but to be honest you should consider creating a button wrapper for the icon if you want to attach click event to it, you will gain the full control of the click and it will be better for blind people.