I learn how to use styled components in react I do step by step following the video. I have this piece of code I have a problem with this line and others too
color: ${(props) => (props.invalid ? "red" : "black")}
VS Code tells me this
"Property 'invalid' may not exist on type 'ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes> & { ...; }, any>'. Did you mean 'onInvalid'?ts(2568)"
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React, { useState } from "react";
import styled from "styled-components";
import Button from "../../UI/Button/Button";
import "./CourseInput.css";
const FormControl = styled.div`
margin: 0.5rem 0;
& label {
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
color: ${(props) => (props.invalid ? "red" : "black")}
}
& input {
display: block;
width: 100%;
border: 1px solid ${(props) => (props.invalid ? "red" : "#ccc")};
background: ${(props) => (props.invalid ? "red" : "transparent")}
font: inherit;
line-height: 1.5rem;
padding: 0 0.25rem;
}
& input:focus {
outline: none;
background: #fad0ec;
border-color: #8b005d;
}
`;
const CourseInput = (props) => {
const [enteredValue, setEnteredValue] = useState("");
const [isValid, setIsValid] = useState(true);
const goalInputChangeHandler = (event) => {
//set back true
if (event.target.value.trim().length > 0) {
setIsValid(true);
}
setEnteredValue(event.target.value);
};
const formSubmitHandler = (event) => {
event.preventDefault();
if (enteredValue.trim().length === 0) {
//trim deletes white spacec overall
setIsValid(false);
return;
}
props.onAddGoal(enteredValue);
};
return (
<form onSubmit={formSubmitHandler}>
{/* <div className={`form-control ${!isValid ? "invalid" : ""}`}> */}
<FormControl invalid={!isValid}>
<label>Course Goal</label>
<input type="text" onChange={goalInputChangeHandler} />
</FormControl>
{/* </div> */}
<Button type="submit">Add Goal</Button>
</form>
);
};
export default CourseInput;Since invalid is not a prop that the div element knows by default it does not recognize it.
To overcome this, you can give FormControl props with the "$" key as follows:
<FormControl $invalid={!isValid}>
Then, inside FormControl:
color: ${(props) => (props.$invalid ? "red" : "black")}