react native - State Management with Multiple Inputs (Lists) -

i'm trying figure out best place manage state lists of input in react-native haven't found good, thorough examples or clear guidance , can see few options.

for simplicity not including specifics tool managing state, understanding how state stored doesn't impact component it's managed.

scenario

a screen component receives array of items props displayed in list of listitems. each listitem includes input, simplicity imagine switch (boolean).

use cases include array of form questions or settings displayed in list , allowing user input. pseudocode:

class settingsview extends component {   render () {     return (       <view>         <list style={styles.list}>           {this.props.inputarray.map((item, index) => (             <listitem               title={item.title}               isswitched={item.value}               key={index}               onswitchchange = {this.onchange}             />           ))}         </list>       </view>     );   } } 

option 1 based on thinking in react page, 1 option comes mind managing state @ screen (settingsview) level creating array of (inputarray).length in settingsview constructor state , have onchange function update array based on key.

option 2 second option see having each listitem manage state it's displaying. makes sense encapsulation perspective me, less managing of state, given onswitchchange function in settingsview , i'm not clear how work.

are there other options i'm not considering? admit experience in react/rn limited , def coming more object mindset ios's list datasource model.

note: option having entire inputarray in state, instead of passed props. understanding state should minimized, designing inputs each item in inputarray should in state. i.e. form labels (i.e. questions) props not state.

option 1 better choice, there concept "smart components , dumb components"

smart components: typically holds state of child components associated it, defines functions passed down child components modify state.

dumb components: these components receives props includes data , functions typically don't have own state , relies heavily on parent component.

the problem when create component need decide whether it's smart or dumb, associate screen smart component, in example settingsview(smart) hold state , function , it's children dumb components application specific decision because might have settingsview dynamic based on context , better make dumb component let's use example above

since settings view relies on this.props.inputarray passed parent component(i call parentcomponent) couldn't modify inputarray directly in settingsview pass prop parentcomponent settingsview function modifies inputarray

class parentcomponent extends component {     constructor(props) {         super(props);         this.state = {             inputarray: [],         };         this.onswitchchange = this.onswitchchange.bind(this); // when passing fn     }     onswitchchange(index) { // index come child component         // logic here based on index update state         this.setstate('inputarray' updatedstate); // updatedstate example variable     }     render() {         return (             <view>                 <settingsview                      onswitchchange={(index) => () => this.onswitchchange(index)}                     inputarray={this.state.inputarray}                  />             </view>         );     }     /*         (index) => () => this.onswitchchange(index)         function return function         need because want delay execution of onswitchchange         , capture index , associate method, typically         used if passing function child component(settingsview) used         handler events.     */ }  class settingsview extends component {   render () {     return (       <view>         <list style={styles.list}>           {this.props.inputarray.map((item, index) => (             <listitem               title={item.title}               isswitched={item.value}               key={index}               onswitchchange={this.props.onswitchchange}             />           ))}         </list>       </view>     );   } } 

this example might pointless because use settingsview parent of listitem , other components since settingsview state managed parentcomponent dumb component , can used in other screens have specific state settingsview needs operate. general goal create many dumb components possible reason being these type of components highly reusable because need pass them props work.