I had the same issue. I found stopPropagation did work. I would split the list item into a separate component, as so: class List extends React.Component { handleClick = e => { // do something } render() { return ( <ul onClick={this.handleClick}> <ListItem onClick={this.handleClick}>Item</ListItem> </ul> ) } } class ListItem extends React.Component { handleClick = … Read more
It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less. Some CSS mechanisms like Flexbox and CSS Grid have … Read more
Default props with class component Using static defaultProps is correct. You should also be using interfaces, not classes, for the props and state. Update 2018/12/1: TypeScript has improved the type-checking related to defaultProps over time. Read on for latest and greatest usage down to older usages and issues. For TypeScript 3.0 and up TypeScript specifically … Read more
Also using Babel, Typescript and Jest. Had the same failure, driving me crazy for hours. Ended up creating a new babel.config.js file specifically for the tests. Had a large .babelrc that wasn’t getting picked up by jest no matter what i did to it. Main app still uses the .babelrc as this overrides babel.config.js files. … Read more
So, if I’m understanding you correctly, your first solution is suggesting that you’re keeping state in your root component? I can’t speak for the creators of React, but generally, I find this to be a proper solution. Maintaining state is one of the reasons (at least I think) that React was created. If you’ve ever … Read more
create-react-app encapsulates all of the npm modules it is using internally, so that your package.json will be very clean and simple without you having to worry about it. However, if you want to start doing more complex things and installing modules that may interact with modules create-react-app is using under the hood, those new modules … Read more
You can use React.PropTypes.shape to validate properties: propTypes: { data: React.PropTypes.shape({ id: React.PropTypes.number.isRequired, title: React.PropTypes.string }) } Update As @Chris pointed out in comments, as of React version 15.5.0 React.PropTypes has moved to package prop-types. import PropTypes from ‘prop-types’; propTypes: { data: PropTypes.shape({ id: PropTypes.number.isRequired, title: PropTypes.string }) } More info
The argument passed to useState is the initial state much like setting state in constructor for a class component and isn’t used to update the state on re-render If you want to update state on prop change, make use of useEffect hook function Avatar(props) { const [user, setUser] = React.useState({…props.user}); React.useEffect(() => { setUser(props.user); }, … Read more
Typescript and PropTypes serve different purposes. Typescript validates types at compile time, whereas PropTypes are checked at runtime. Typescript is useful when you are writing code: it will warn you if you pass an argument of the wrong type to your React components, give you autocomplete for function calls, etc. PropTypes are useful when you … Read more
Within the push method of hashHistory, you can specify your query parameters. For instance, history.push({ pathname: ‘/dresses’, search: ‘?color=blue’ }) or history.push(‘/dresses?color=blue’) You can check out this repository for additional examples on using history