I've met two approaches to handle events by stateless functional components:
1)
const SomeInputComponent = ({ onTextChange }) => (
<input type='text' onChange={(e) => onTextChange (e.target.value)} />
);
2)
const SomeInputComponent = ({ onTextChange }) => {
const handleChange = (e) => {
onTextChange(e.target.value);
}
return (
<input type='text' onChange={handleChange} />
);
};
Which one is more preferable? What are pros and cons?