In react (TS), how can I make sure if one prop is passed to a component, another prop is also required to be passed?

Question

For example I have a component that takes in these props through an interface:

interface InputProps {
   error?: boolean;
   errorText?: string;
}

const Input = ({error, errorText}: InputProps) => { etc etc }

How do I make it so that if this component is called in another part of the code i.e.

<Input />

"error" has to be passed as a prop if "errorText" has been passed.

Not sure where to start

Does it have to be a typescript solution? Because proptypes can do the job. — Arkellys, Apr 30 '23 at 12:43

score -1 · Answer 1 · answered Apr 30 '23 at 12:37

Why do you want to do this? You can simply set this error to true/false inside your <Input /> component by doing this:

interface InputProps {
   errorText?: string;
}

const Input = ({error, errorText}: InputProps) => {
    const [error, setError] = useState(false)

    useEffect(() => {
        if(errorText){
            setError(true)
        }
    },[errorText])

    return <></>
}

Additionally you can also write a helper function inside this component to listen to the changes being made to your <Input /> component and keep modifying error in realtime. I am not sure what this component does but I am assuming this is a form component so you can do this by adding an onChange listener.

See also this suggested solution, that fits your description.

In react (TS), how can I make sure if one prop is passed to a component, another prop is also required to be passed?

1 Answers1