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?

CertainPerformance · Accepted Answer · 2020-10-15 19:29:08Z

14

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}

answered Oct 15, 2020 at 19:29

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot use boolean in JSX attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related