Cannot use boolean in JSX attribute

Question

I'm learning React + Typescript and I'm facing a weird problem. Essentially I have defined a FunctionComponent:

const AddLogModal: React.FC<{ addLog: Function }> = ({ addLog }) => {
    const [message, setMessage] = useState('');
    const [attention, setAttention] = useState(false);
    const [tech, setTech] = useState('');

and I'm trying to assign to the checkbox value the attention variable, so I did:

 <input
       type="checkbox"
       className="filled-in"
       checked={attention}
       value={attention}
       onChange={e => setAttention(!attention)}
       />

so far I get this error:

Type 'boolean' is not assignable to type 'string | number | readonly string[] | undefined'.

What I did wrong?

Answer 1

The state of the checkbox is set with the checked attribute only - it doesn't take a value as well. Remove this part:

value={attention}