How to solve sonarQube duplicate lines issue?

Question

I pushed my code into GitLab. But my pipeline is giving me a sonarqube issue. In Sonarqube, I am facing a duplicate line issue. I don't know how to solve this issue. Can anyone help me understand and solve this duplicate line issue in SonarQube?

I want to achieve 0% duplicate lines in my code. If I can understand how I am getting this error, I will be able to solve this issue.

import React from "react";
import { OutlinedInputProps, TextField, TextFieldProps, alpha, styled } from "@material-ui/core";
const TextInput = styled((props: TextFieldProps) => (
<TextField
  InputProps={{
    disableUnderline: true,
    sx: {
      '& input::placeholder': {
        color: "red !important" // Change to desired color
      }
    }
  } as Partial<OutlinedInputProps>}
  {...props}
/>
))(({ theme }) => ({
'& .MuiFilledInput-root': {
  border: '1px solid #FEE7D7',
  width: '410px',
  overflow: 'hidden',
  borderRadius: "8px",
  backgroundColor: '#fcfcfb',
  fontFamily:"Montserrat",
  transition: theme.transitions.create([
    'border-color',
    'background-color',
    'box-shadow',
  ]),
  '&:hover': {
    backgroundColor: 'transparent',
  },
  '&.Mui-focused': {
    backgroundColor: 'transparent',
    boxShadow: ${alpha("#FEE7D7", 0.25)} 0 0 0 2px,
    borderColor: "#FEE7D7",
  },
  '.MuiFormLabel-root.Mui-focused': {
    color: "red",
},
},
'& .MuiFilledInput-underline:after' : {
    borderBottom: '0px',
},
'& .MuiFilledInput-underline:before' : {
    borderBottom: '0px',
},
'& .MuiFormLabel-root.Mui-focused': {
    color: "#9D9D9D",
},
'& .MuiInputLabel-filled.MuiInputLabel-shrink': {
  transform: translate(12px, 9px) scale(0.88)
},
'& .MuiFormHelperText-root.MuiFormHelperText-contained.Mui-error':{
  fontFamily:"Montserrat !important",
  fontSize: "8px",
  lineHeight: "12px",
//  position: "absolute",
},
'& .MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-filled':{
  fontFamily:"Montserrat!important",
  color: "#9D9D9D",
}
}));
export default TextInput;

Answer 1

I'm guessing you're asking this question because you don't understand what the issue means.

I'll describe a scenario that leads up to the issue you are seeing.

Let's say that you have a method in one source file, and you realize that you have a need to do that exact same thing in a different source file. The proper solution is to structure your code so that the same method can be used by both source files. Instead, you decide to simply copy all the code in the method in the first source file into a new method in the second source file. Using this cheap solution increases your maintenance burden. If at some point the logic in that block of code needs to change, it has to be properly changed in both places.

When SonarQube runs the scan, it can detect that you have a non-trivial block (larger than a couple of lines) that is duplicated in two or more places. That is what you are getting.

The solution is to properly refactor your code so that you no longer have a duplicate block of code, you have a single block of code that is used from both places that need that code.