Bind data in to TextInput from an array in react native

Question

I have an array of data. Like

product = [
  {
    name: 'item 1',
    quantity: 10,
  },
  {
    name: 'item 2',
    quantity: 12,
  },
  {
    name: 'item 3',
    quantity: 14,
  },
]

I want to show this quantity field in TextInput.

So how can I do that and also manage the onChangeText event?

Answer 1

First I recommend for you You should read array and list from react native documentation then you should read TextInput properties finally :) Here is working example

https://snack.expo.io/HJm8EOPr8 - react native

 export default class App extends React.Component {
   constructor(props) {
    super(props)
    this.state = {
        product : [
  {
    name: 'item 1',
    quantity: 10,
  },
  {
    name: 'item 2',
    quantity: 12,
  },
  {
    name: 'item 3',
    quantity: 14,
  },
]
    }
  }
  render() {
    return (
      <View style={styles.container}>
        {this.state.product.map(item => (
              <TextInput  value={item.quantity}  /> 
        ))}
      </View>
    );
  }
}

Answer 2

Check this complete example.

import React, { Component } from "react";
import { View, TextInput } from "react-native";

export default class Example extends Component {
  state = {
    product: [
      {
        name: "item 1",
        quantity: 10
      },
      {
        name: "item 2",
        quantity: 12
      },
      {
        name: "item 3",
        quantity: 14
      }
    ]
  };

  onChangeText = ( item, text ) => {
      let updateProducts = [...this.state.product]
      let index = this.state.product.findIndex(obj => obj.name == item.name)
      updateProducts[index].quantity = text;
      this.setState({
        product: updateProducts
      })
  }

  render() {
    return (
      <View>
        {this.state.product.map(item => (
          <TextInput
            style={{ height: 40, borderWidth: 1, margin: 5, width: "80%", padding: 5 }}
            onChangeText={(text) => this.onChangeText(item, text)}
            value={item.quantity}
          />
        ))}
      </View>
    );
  }
}

Hope this helps you. Feel free for doubts.