Warning: React does not recognize the `isEditing` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isediting` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in button (created by ForwardRef(Tab))
in ForwardRef(Tab) (created by Context.Consumer)
in StyledComponent (created by Styled(Component))
in Styled(Component) (at App.js:14)
In the TextBox component you're passing all the props from the parent via {...props}. Considering that TextField itself doesn't have 'isEditing' property, I assume it passes it down to the underlying input DOM element, which doesn't recognise that prop.
What you can do is to extract the props used inside TextBox and collect the rest using the rest argument, so you don't end up passing unnecessary props down:
*FOR WRAPPED COMPONENTS*
const {isEditing, ...args} = props;
OR
export default function TextBox({isEditing, ...props}) {
//isEditing usage
return <TextField {...props}/>
};
*FOR STYLED-COMPONENTS*
const TextBox = styled(({ isEditing, ...props }) => <TextField {...props} />)`
visibility: ${(props) => (props.isEditing ? "visible" : "hidden")};
flex-direction: row;
width: 100%;
`;
*FOR STYLED-COMPONENTS v5.1+ *
Those coming from Google, in styled-components you have to rename your props to start with $, and you need to be on 5.1+. https://styled-components.com/docs/api#transient-props
const TextBox = styled(TextField)`
visibility: ${(props) => (props.$isEditing ? "visible" : "hidden")};
flex-direction: row;
width: 100%;
`;
<TextBox
$isEditing={isEditing}
id="standard-name"
label="Update title"
value={name}
onChange={onChangeHandler}
fullWidth
multiline
rowsMax={4}
/>
Thanks!