block4.js

function Profile(props) {
	const { name, age } = props
  return (
		<div>
			<h2>{name}</h2>
			<div>{age}</div>
			<Detail {...props} />
		</div>
	)
}

// usage, say, connect to redux
const ConnectedProfile = connect(state => ({
	name: state.name,
	age: state.age,
	gender: state.gender, // this prop appears not necessary
})(Profile)

Does this work better?

function Profile(props) {
	const { name, age, ...rest } = props
  return (
		<div>
			<h2>{name}</h2>
			<div>{age}</div>
			<Detail {...rest} />
		</div>
	)
}

// usage, say, connect to redux
const ConnectedProfile = connect(state => ({
	name: state.name,
	age: state.age,
})(Profile)