I have a react native component called width. It has 3 width values which have associated <TextInput>s which map to the redux store as {width:{width1: somevalue, width2: someValue, width3: someValue}}I need to create an exact replica component but called thickness and it needs to map to the redux store with {thickness:{thickness1: somevalue, thickness2: someValue, thickness3: someValue}}Is there a better way to create an exact replica of this react component than to copy and paste it, and search and replace every width with thickness? Because at this stage, that is what I'm about to do. But it seems pretty bad practice. It also seems like I will introduce a whole lot of complexity if I try to generalise it to a base component and have them both extend it. Here is the width component that would be copied:import React from 'react'import { View, Text } from 'react-native'import { connect } from 'react-redux'import { formStyles } from '../../style'import { DimenInput } from '../dimenInput/DimenInput'import { updateDimension } from '../../actions/updateDimension.action'const mapStateToProps = (state) => {  return {    width1: state.get('width').get('width1').toString(),    width2: state.get('width').get('width2').toString(),    width3: state.get('width').get('width3').toString()  }}const mapDispatchToProps = (dispatch) => {  return {    updateWidth: (text, number) => {      dispatch(updateDimension('width', text, number))    }  } }let Width = (props) => {  return (    <View style={formStyles.container}>      <DimenInput        value={props.width1}        onChangeText={text => props.updateWidth(text, 1)}      />      <Text style={formStyles.text}>{'&'}</Text>      <DimenInput        value={props.width2}        onChangeText={text => props.updateWidth(text, 2)}      />      <Text style={formStyles.text}>{'/'}</Text>      <DimenInput        value={props.width3}        onChangeText={text => props.updateWidth(text, 3)}      />    </View>  )}Width.propTypes = {  width1: React.PropTypes.string.isRequired,  width2: React.PropTypes.string.isRequired,  width3: React.PropTypes.string.isRequired,  updateWidth: React.PropTypes.func.isRequired}Width = connect(  mapStateToProps,  mapDispatchToProps)(Width)export default WidthI'm wanting to use functional programming. Preferably no classes. Here is the thickness component that I explained:import React from 'react'import { View, Text } from 'react-native'import { connect } from 'react-redux'import { formStyles } from '../../style'import { DimenInput } from '../dimenInput/DimenInput'import { updateDimension } from '../../actions/updateDimension.action'const mapStateToProps = (state) => {  return {    thickness1: state.get('thickness').get('thickness1').toString(),    thickness2: state.get('thickness').get('thickness2').toString(),    thickness3: state.get('thickness').get('thickness3').toString()  }}const mapDispatchToProps = (dispatch) => {  return {    updateThickness: (text, number) => {      dispatch(updateDimension('thickness', text, number))    }  } }let Thickness = (props) => {  return (    <View style={formStyles.container}>      <DimenInput        value={props.thickness1}        onChangeText={text => props.updateThickness(text, 1)}      />      <Text style={formStyles.text}>{'&'}</Text>      <DimenInput        value={props.thickness2}        onChangeText={text => props.updateThickness(text, 2)}      />      <Text style={formStyles.text}>{'/'}</Text>      <DimenInput        value={props.thickness3}        onChangeText={text => props.updateThickness(text, 3)}      />    </View>  )}Thickness.propTypes = {  thickness1: React.PropTypes.string.isRequired,  thickness2: React.PropTypes.string.isRequired,  thickness3: React.PropTypes.string.isRequired,  updateThickness: React.PropTypes.func.isRequired}Thickness = connect(  mapStateToProps,  mapDispatchToProps)(Thickness)export default Thickness
Create exact replica of react component with different name
ecmascript 6;react.js;redux;react native