How to use "event.target.value" & "event.target.checked" together in reactjs?

Question

I have few input fields few are type text and few are type checkboxes how can i get all the fields value together right now i'm able to only one at a time like given below example:-

handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
    this.setState({ [event.target.name]: event.target.checked });
};

I'm not able to use both together. Whats wrong with it?

Thank you for your efforts!

Answer 1

You could use nullish coalescing operator :

this.setState({ [event.target.name]: event.target.checked ?? event.target.value });

Or explicitly test for the property existence:

if('checked' in event.target) {
    this.setState({ [event.target.name]: event.target.checked });
}

if('value' in event.target) {
    this.setState({ [event.target.name]: event.target.value});
}

Answer 2

You could have a conditional statement depending on the input type property. The checked property is only used with <input type=checkbox />

this.setState({ [event.target.name]: 
  event.target.type === 'checkbox' 
    ? event.target.checked 
    : event.target.value 
});