Styled Components - dynamic styles

Question

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;

Answer 1

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")}