Make form editable

Question

I'm beginner in React-native I"m making an form which can be editable if user click on item it will redirect to form where its previous value will be there and he can edit it and save it.

this is my state

 constructor(props) {
        super(props);
        this.state = {
            ProjectId:'',
            ProjectName:'',
            Items:[{
               Item_Description:'',
               Specification:"",
               QtyReq:'',
               Unit:"",
               ItemId:"",
               QtyUnit:'',
               searchedForm:[]
            }],
        };
      }

getting all the value from api and setting the state

 componentDidMount = () => {
        const { indent } = this.props;
        this.props.getStockItems()
        this.props.getSites()

        this.setState({
          ProjectId:indent.ProjectId,
          ProjectName:indent.ProjectName,
        })

//maping through Items because i have array of item you can see in state 

        indent.Items.map((item,newindex) => {
            this.setState({
                Items:[{
                    Item_Description:item.Item,
                    Specification:item.Specification,
                    QtyReq:item.QtyReq,
                    Unit:item.Unit,
                    ItemId:item.ItemId,
                    QtyUnit:item.QtyUnit,
                    searchedForm:[]
                 }],
            })
        })
      };

onChnage Text

 onItemDescriptionChange = (text, index) => {
        const { stocks } = this.props.indents;

        var searchedForm = stocks.filter(function(stock) {
          return stock.Item.toLowerCase().indexOf(text.toLowerCase()) > -1;
        });

        const existingItems = this.state.Items.map(fields => ({...fields}))
        let targetField = {...existingItems[index]}
        targetField.Item_Description = text
        targetField.searchedForm = searchedForm
        existingItems[index] = targetField


        this.setState({ Items: existingItems})

      }

      onQuantityChange = (text, index) => {
        const existingItems = this.state.Items.map(fields => ({...fields}))
        let targetField = {...existingItems[index]}
        targetField.QtyReq = text
        existingItems[index] = targetField

        this.setState({Items: existingItems})
      }

      onSpecificationChange = (text, index) => {
        const existingItems = this.state.Items.map(fields => ({...fields}))
        let targetField = {...existingItems[index]}
        targetField.Specification = text
        existingItems[index] = targetField

        debugger
        this.setState({Items: existingItems})
      }



      itemSelect = (item,index) => {
        const existingItems = this.state.Items.map(fields => ({...fields}))
        let targetField = {...existingItems[index]}
        targetField.Item_Description = item.Item
        targetField.Unit = item.Unit
        targetField.QtyUnit = item.UnitId
        targetField.ItemId = item.ItemId
        targetField.searchedForm = []
        existingItems[index] = targetField
        this.setState({ Items:existingItems})

        console.log("hello" + " " + item.Item + " " + index);

      }

      onsubmit = () => {
        const data = {
            ProjectId:this.state.ProjectId,
            Items:this.state.Items
        }

      console.log(data)

  }

render

render() {
        const { indent } = this.props;

        const newItems =   (
                <View >
                    {
                    this.state.Items.map((field, parentindex) => {
                      return(
                        <Card key={parentindex} >

                          <Block padding={[0, theme.sizes.base]} margin={[theme.sizes.base,0]}>
                            <Block>
                              <Input 
                                label="Item Description"
                                style={[styles.input]}
                                defaultValue={field.Item_Description}   
                                onChangeText={(text) => this.onItemDescriptionChange(text, parentindex)}
                              /> 
                            <Block padding={[0, theme.sizes.base]} >
                                <FlatList
                                  data={field.searchedForm}
                                  keyExtractor={(ItemId,index) => index.toString()}
                                  renderItem={({item,index})=>(
                                    <ListItem
                                      key={index}
                                    >
                                      <TouchableOpacity  onPress={()=>this.itemSelect(item,parentindex)}>
                                        <Text bold>{item.Item}</Text>
                                      </TouchableOpacity>
                                    </ListItem>

                                  )} 
                                />
                              </Block>
                            </Block>
                            <Block margin={[theme.sizes.base,0]}>
                              <Input 
                                label="Specification"
                                style={[styles.input]}
                                defaultValue={field.Specification} 
                                onChangeText={(text)=> this.onSpecificationChange(text, parentindex)}
                              /> 
                            </Block>

                            <Block style={{flexDirection:"row"}}>
                              <Block margin={[theme.sizes.base,0]}>
                                <Input 
                                  label="Quantity"
                                  style={[styles.input]}
                                  defaultValue={`${field.QtyReq}`}   
                                  keyboardType="numeric"  
                                  onChangeText={(text)=> this.onQuantityChange(text, parentindex)}
                                />
                              </Block>      
                              <Block margin={[theme.sizes.base,0]}>
                                <Input 
                                  label="Unit"
                                  style={[styles.input]}
                                  defaultValue={`${field.Unit}`} 
                                  editable={false} 
                                  selectTextOnFocus={false}
                                /> 
                              </Block>

                            </Block>
                          </Block>
                        </Card>
                      )
                    })
                  } 
                </View>
            )
        // })
        return (
            <KeyboardAvoidingView style={{flex:1, justifyContent:"center"}} behavior="padding">
                <Card>
                    <Picker
                      style={{flex:1}}
                      selectedValue={this.state.ProjectId}   
                      onValueChange={(ProjectId)=>this.setState({ProjectId:ProjectId})} 
                    >
                      <Picker.Item key={indent.IndentId} value={this.state.ProjectId} label={this.state.ProjectName}/>
                    </Picker>
                  </Card>
                <Text> hello :- {indent.IndentId} </Text>
                <ScrollView>
                {newItems}
                <Block  middle flex={0.5} margin={[0, theme.sizes.padding * 2]}>
                    <Button
                      style={styles.submitButton}
                      onPress={this.onsubmit}
                    >
                      <Text white bold center>Submit</Text>
                    </Button>
                  </Block>
                </ScrollView>

            </KeyboardAvoidingView>
        )
    }
}


EditIndent.propTypes = {
    getStockItems: PropTypes.func.isRequired,
    getSites: PropTypes.func.isRequired,
    indent: PropTypes.object.isRequired,
  };

  const mapStateToProps = state => ({
    site: state.site,
    errors:state.errors,
    indents: state.indent,
  });

  export default connect(
    mapStateToProps, 
    { 
        getStockItems,
        getSites,
        postIndent
    }
  )(EditIndent);

Now problem is I have 3 Items in it but it only showing me 1 Item. Items is a array of object in Items I have 3 object but it only showing me last object

This is data which I'm getting from api. So for 3 Items there will be 3 form

[
    {
        "IndentDate": "2019-08-17T18:17:56.17",
        "ProjectName": "Infosys Panchsil Pune-(Po No-1300043503)",
        "Items": [
            {
                "Item": "2 Hrs Fire Rated Interlayred Fire Glass Contraflame Door Lite -CFDL - 11 MM of Saint Gobain Make",
                "Unit": "Sqmtr",
                "IndentId": 5369,
                "ItemId": 1115,
                "Specification": "qwerty",
                "QtyReq": 56,
                "QtyUnit": 22,
            },
            {
                "Item": "13Amp Adapter",
                "Unit": "Nos",
                "IndentId": 5369,
                "ItemId": 1738,
                "Specification": "rtyu",
                "QtyReq": 25,
                "QtyUnit": 11
            },
            {
                "Item": "1\"  3M Tape - Mirror Mounting (8.23 Meter)",
                "Unit": "Roll",
                "IndentId": 5369,
                "ItemId": 29,
                "Specification": "uuyttr",
                "QtyReq": 24,
                "QtyUnit": 16
            }
        ],
        "IndentId": 5369,
        "ProjectId": 257,
    }
]

I want Forms according to Items but I'm Only getting last form

Answer 1

change

 indent.Items.map((item,newindex) => {
        this.setState({
            Items:[{
                Item_Description:item.Item,
                Specification:item.Specification,
                QtyReq:item.QtyReq,
                Unit:item.Unit,
                ItemId:item.ItemId,
                QtyUnit:item.QtyUnit,
                searchedForm:[]
             }],
        })
    })

To

    const ItemsArray =[];
     indent.Items.map((item,newindex) => {
                ItemsArray.push({
                        Item_Description:item.Item,
                        Specification:item.Specification,
                        QtyReq:item.QtyReq,
                        Unit:item.Unit,
                        ItemId:item.ItemId,
                        QtyUnit:item.QtyUnit,
                        searchedForm:[]
                     });
            })
  this.setState({ Items:ItemsArray });

Every time you call this.setState it replaces previous value to current value , so you were getting only last object.