How to get values from multiple TextInput fields coming from array passing by map function to single variable by entering text in them? When i try to enter text in second TextInput it replaces the value which i stored from first TextInput.
Secondly instead of this, if i use push() function, it doesn't give desired output. What I exactly want is that to get the values of these three InputText and to store in single variable using single OnChangeEvent (as I am using Map() function).
Below is the sample of code on which i am working in React-Native.
this.state={
checkboxAttCollection:[{"Id": 10, "AttibuteCollectionName": "PowerTest"}, {"Id": 22, "AttibuteCollectionName": "36W"}, {"Id": 23, "AttibuteCollectionName": "Test123"}],
getInputText:'',
getInputvariables:[],
onChangeTextComp=(TextValue,index)=>{
this.state.getInputText=TextValue
console.log("******",this.state.getInputvariables)
this.state.getInputvariables.push(this.state.getInputText)
console.log("******",this.state.getInputvariables)
{this.state.checkboxAttCollection.map((item, i) =>
return (<View key={item.AttibuteCollectionId} style={{ flexDirection: 'row',}}>
<TextInput style={{height:hp('5%'),width:wp('60%'),backgroundColor:'red',borderBottomWidth:2,paddingVertical:0}}
onChangeText={(text)=>this.onChangeTextComp(text,i)}
MultiInputText={true}/>
{/* </View> */}
</View>)
})}
Try this way
this.state={
......
inputVlaues: []
}
onChangeTextComp=(value,index)=>{
const inputData = [...this.state.inputVlaues];
inputData[index] = value;
this.setState(inputVlaues: inputData);
}
{this.state.checkboxAttCollection.map((item, i) =>
return
(<View key={item.AttibuteCollectionId} style={{ flexDirection: 'row',}}>
<TextInput
onChangeText={(text)=>this.onChangeTextComp(text,i)}
......
value={this.state.inputVlaues[i] || ""}
/>
</View>)
})}
as an option you can generate event handlers dynamically
const [form, setForm] = useState({})
const createHandler = (fieldName) => {
return (newFieldValue) => {
setForm((oldValue) => {
return {
...oldValue,
[fieldName]: newFieldValue
}
})
}
}
return (
<>
<TextInput onChange={createHandler('name')} />
<TextInput onChange={createHandler('surname')} />
</>
)
Related
I want to build a search bar that filters a flatlist in react native. I'm doing so with a TextInput and a component SearchFilter.
In my homescreen I have this TextInput:
<TextInput
value={input}
onChangeText={(text) => setInput(text)}
style={{ fontSize: 16, marginLeft: 10 }}
placeholder="Search"
/>
And this component:
<SearchFilter data={Cars} input={input} setInput={setInput} />
In the component file I have my flatlist:
const searchFilter = (data, input, setInput) => {
console.log(input)
return (
<View>
<Text>SearchFilter</Text>
<FlatList
style={styles.list}
data={data}
renderItem={({ item }) => {
if (input === "") {
return (
<View>
<Text>test</Text>
</View>
)
}
}}
></FlatList>
</View>
);
};
When nothing is being searched I want test to be displayed.
The problem is that it shows nothing.
When I do a console.log(input) in my homescreen the console returns an emty string
but when I do a console.log(input) in my component file it returns {}. I do not know why. When I tried
if (input === " {}") {
return (
<View>
<Text>test</Text>
</View>
)
}
it also did not work.
Any asolutions?
I suppose the searchFilter is your component ?
If it is the case then you don't use the props correctly, try like this :
const SearchFilter = ({data, input, setInput}) => { ... rest of your code ... }
You can't compare a object like this, it's not the same (in the memory).
Assuming var x = {}
x == {} // false (it's the same 'content' but it's not saved at the same place in the memory
x == "{}" // false (x is a object "{}" is a string)`
Assuming var y = x
y == x // true
To compare basic object, you can use JSON.stringify() function, it's parse object to string like this : (JSON.stringify(x) == JSON.stringify({})) === true
It's explain why your condition doesn't work but I don't know why do you have a object as output (I'm not a react developer ^^)
I hope it's even be usefull for you
I am a newbie in RN and recently started using redux. I have a api response which is of the below format:
{
records : [
{
name : "cde"
groups :[
{
id : "212"
fields[{
data : "abc"
}]
}]
}
]
}
So, Inside records , I have an array of objects "groups" and inside "groups" I have array of objects "fields" and inside fields, I have data which I want to display inside FlatList. I am able to display "name" which is inside records inside FlatList As of now.
My File PeopleList.js looks like below :
export default class PeopleList extends Component {
_keyExtractor = item => name;
_renderItem = ({ item }) => {
const { name} = item;
const groups = this.props.people.map((items, index)=>{
return( <Text>{name}({items.id})</Text>)
})
//const {} = item.groups;
return (
<View>
<View style={styles.cardContainerStyle}>
<View style={{ paddingRight: 5 }}>
<Text style={styles.cardTextStyle}>
{/* {name} {"\n"} */}
{groups}
</Text>
</View>
<Image
style={styles.faceImageStyle}
// source={{ uri: picture.medium }}
/>
</View>
</View>
);
};
render() {
return (
<FlatList
style={{ flex: 1 }}
data={this.props.people}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
/>
);
}
}
PeopleList.propTypes = {
people: PropTypes.array
};
people is an array that contains the records object : responseJson.records
So, how can I display data and also what is the use of keyextractor?
As per what I have searched so far is that we need to use map function for arrays but not quite sure how to use it here
Edit : I have modified my code and used map func, now the output that I get is:
name1 groupid1 groupid2 ... so on
name2 groupid1 groupid2 ... so on
.
.
. and so on
where as I want :
name1 groupid1
name2 groupid2
.
.
.
You can display the data using destructuring assignment like the one you use in your code.
Eg:
const { name, groups } = item;
const { fields } = item.groups;
keyExtractor assign a unique key value to your render items. In your case, it assign a name value (from your this.props.people) to each items in your Flatlist.
As you know, all react children needs a unique key or you will get this warning
Warning: Each child in a list should have a unique "key" prop
The below code needs to be added
if(item.groups){
groupList = item.groups.map((unit, key)=>{
return (<View key="key">
<Text>{unit.id}</Text>
{ unit.fields.map((unit1, key1)=>{
return <Text key={key1}>{unit1.name}</Text>
})
}
and later we need to display groupList
return (
<View>
<View style={styles.cardContainerStyle}>
<View style={{ paddingRight: 5 }}>
<Text style={styles.cardTextStyle}>
{/* {name} {"\n"} */}
{groupList}
</Text>
</View>
<Image
style={styles.faceImageStyle}
// source={{ uri: picture.medium }}
/>
</View>
</View>
);
The above snippet will display data inside fields.
I am doing a loan calculation app and i run into the trouble since i am new to react native and previously i have been manipulating the DOM using querySelector or getElementById functions. However this does not work in react, and i am using state to store the value from the user, but i just can't seem to get it right, What am i doing wrong?
I've inserted the calculation element that is later rendered in app.js. All elements are showing up with no error, but the problem is to get user input data and then be able to use that data and do calculations.
Here is my Class
class LanKalkylElement extends React.Component {
constructor(props) {
super(props);
this.state = {
loanAmount: 20000,
loanInterest: 2.5,
loanYear: 10,
};
}
changeAmount(loanAmount) {
this.setState(() => {
return {
loanAmount: parseFloat(loanAmount),
};
});
}
changeInterest(loanInterest) {
this.setState(() => {
return {
loanInterest: parseFloat(loanInterest),
};
});
}
changeYear(loanYear) {
this.setState(() => {
return {
loanYear: parseFloat(loanYear),
};
});
}
calcButton() {
Alert.alert(this.props.loanAmount);
}
buttonHomeFunc() {
this.props.navigation.navigate('Start');
}
render() {
const {loanAmount, loanInterest, loanYear} = this.state;
return(
<View style={styles.contentStyle}>
<Text style={styles.text}> Lånebelopp </Text>
<TextInput style={styles.numericInput}
onBlur={Keyboard.dismiss}
keyboardType={'numeric'}
value={loanAmount}
onValueChange={this.changeAmount.bind(this)} />
<Text style={styles.text}> Ränta </Text>
<TextInput style={styles.numericInput}
onBlur={Keyboard.dismiss}
keyboardType={'numeric'}
value={loanInterest}
onValueChange={this.changeInterest.bind(this)} />
<Text style={styles.text}> Antal år: {String(loanYear)}</Text>
<Slider step={1}
maximumValue={15}
value={loanYear}
onValueChange={this.changeYear.bind(this)} />
<Button title='Kalkylera' onPress={() => this.calcButton()}/>
<Text style={styles.textResult}>Total summa att återbetala:</Text>
<Text style={styles.textResult}>varav räntekostnad:</Text>
<Button title='Tillbaka' onPress={() => this.buttonHomeFunc()}/>
</View>
)
}
}
export default withNavigation(LanKalkylElement);
When a user changes a value in a text input, onValueChange is called. You have bound this prop to functions that modify the state for this component.
This means the value in the text input will always match the value in the state. Therefore, if you need to access the value in a text input you would simply retrieve it from the state, like this:
const loanAmount = this.state.loanAmount;
doSomethingWithLoanAmount(loanAmount);
Sorry guys i'am still learning react native and i want update value of each qty(quantity) item from input, so i have this state,
this.state={
selectedObject={
otherAttributes:'',
items:[
{name:'a',qty:''},
{name:'b',qty:''},
],
},
}
then i have this function to render the TextInput,
renderPage(){
return this.state.selectedObject.items.map(item ,i)=>
<View style={{margin:15}}>
<Text>Name: {item.name}</Text>
<TextInput style={styles.input} keyboardType='numeric' maxLength={10}
value={?}
onChangeText={?}
}}/>
</View>
)
}
and i dont know what to do inside the value and onchangeText,
This is what i tried, in the TextInput
renderPage(){
const itemqty = this.state.selectedObject.items;
return itemqty.map((item,i)=>
<View style={{margin:15}}>
<Text>Name: {item.name}</Text>
<TextInput style={styles.input} keyboardType='numeric'
value={itemqty[i].qty}
onChangeText={(qty)=>{
this.setState({items[i].qty: qty});
}}/>
</View>
)
}
after trying this i'am aware that value can't have '[i]' aswell as in the setState. Because i was trying so that the value qty will go to the respected items qty as well when setState it.
So what i expect is i can change the value of the quantity of the items from the input that are available in this case there are 2, but later on it can be 3,4,5,6 items with qty in each one and set it to the respected state.
Thank you
You have to pass the modified state properties to setState.
PS: I had to update in order to reflect Junius L. comment about not changing component state.
renderPage(){
const itemqty = this.state.selectedObject.items;
return itemqty.map((item,i)=>
<View style={{margin:15}}>
<Text>Name: {item.name}</Text>
<TextInput style={styles.input} keyboardType='numeric'
value={item.qty}
onChangeText={(qty)=>{
let newSelectedObject = {...this.state.selectedObject};
newSelectedObject.items = [...newSelectedObject.items];
newSelectedObject.items[i] = {...newSelectedObject.items[i], qty};
this.setState({selectedObject: newSelectedObject});
}}/>
</View>
)
}
Also, selectedObject is a state property. So the correct is
this.state={
selectedObject:{
otherAttributes:'',
items:[
{name:'a',qty:''},
{name:'b',qty:''},
],
},
}
Try to avoid state mutation, by not updating the array directly.
hanldeChange = (value, index) => {
const items = [
...this.state.selectedObject.items.slice(0, index),
Object.assign({}, this.state.selectedObject.items[index], { qty: value }),
...this.state.selectedObject.items.slice(index + 1),
];
this.setState(prevState => ({
selectedObject: {
...prevState.selectedObject,
items: items,
},
}));
};
In your input do
<TextInput
style={styles.input}
keyboardType="numeric"
value={this.state.selectedObject.items[i].qty}
onChangeText={qty => this.hanldeChange(qty, i)}
/>
How to use checkbox in loop with diffrent key when i use in loop and click on any one after than check all loop checkbox give me solution
You can create an array of solutions in state:
...
state.solutions = [
{value:false},
{value:false},
{value:false}
]
Create a changes event handler:
changeEvent = (ev, index) => {
let tmp_solution = [...state.solutions];
tmp_solutions[index].value = !tmp_solutions[index].value;
this.setState({solutions: tmp_solution})
}
Create the checkboxes render function:
const checkBoxes = this.state.solutions.map((index) =>{
return(
<CheckBox
value={this.state.solutions[index].value}
onValueChange={(ev) => this.changeEvent(ev, index)} key={index}
/>
)
});
Render all the checkboxes:
render() {
<View>
{checkBoxes}
</View>
}
...
sorry if there are errors
Well, suppose that you have a data, so you can use map to do that. In order to save the answers also you can use index in setSetate as below. I use the react-native-checkbox-heaven component to have the check Box:
import CheckBox from 'react-native-checkbox-heaven';
renderContentCheckBox=()=>{
console.log("[renderContent] your data", this.state.data);
return Object.keys(this.state.data).map(function (item, index) {
return (<View key={index} style={{ alignItems: 'flex-start', justifyContent: 'flex-start', width: Dimensions.get('window').width / 1.1, }}>
<CheckBox
label={item.title}
labelStyle={styles.labelStyle}
iconSize={28}
iconName='matMix'
checked={this.state.check1}
checkedColor='#44FF00'
uncheckedColor='#FFFFFF'
onChange={(val) => {(value) => { that.setState({ ["CheckBox" + index]: value, }); console.log("radio" + index, value);
}}
/>
</View>
);
}
}
Then you can use it inside the render:
render() {
return (<View>
{this.renderContentCheckBox(this)}
</View>
);
}