Tenho um objeto da seguinte forma:
var ItensMenu = [
{title: 'Nome', type: 'input', id: 'id1'},
{title: 'CPF', type: 'number', id: 'id2'},
{title: 'Data de Nascimento', type: 'date', id: 'id3'},
{title: 'Data de Cadastro', type: 'date', id: 'id4'},
]
Assim sendo, quero criar um formulário com o map(), da seguite forma:
const [date, setDate] = useState('2018-04-01 16:00:00');
<TextInput
value={date}
nativeID={nativeID}
onChangeText={onChangeText}
Como uso o useState nesse caso?
Pois quero construir esses inputs com um while, daí quando eu fizer a alteração no state específico, quero que altere apenas o campo referenciado. O Objeto irá vir de uma API então não posso escrever o código do useState pra cada input, pois os inpust que vão vir são de qualquer nome e quantidades.
Voltando agora, deu certo com a ajuda do amigo Daniel Magalhaes Agora vou adaptar pra conseguir colocar o RNDateTimePicker
import React, { useState, useEffect } from 'react'
import { Button, View, StyleSheet, TextInput } from 'react-native'
export default function Teste(){
/// VIRÁ DA API - sintaxe à definir
var ItensMenu = [
{title: 'Nome', type: 'input', id: 'id1'},
{title: 'CPF', type: 'number', id: 'id2'},
{title: 'Data de Nascimento', type: 'date', id: 'id3'},
{title: 'Data de Cadastro', type: 'date', id: 'id4'},
]
/// VIRÁ DA API
const [Itens, setItens] = useState([]);
let ItensForm = []
ItensMenu.map((item) => {
ItensForm = [...ItensForm, item]
})
useEffect(() => { setItens(ItensForm) }, [])
return(
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
{
Itens.map((item, index) => {
return(
<View key={'view_'+index} style={{flex:1, justifyContent: 'center', alignItems: 'center', width: '100%'}}>
<TextInput
value={Itens[index].id}
style={Css.input}
onChangeText={ (value) => {
Itens[index].id = value
setItens([...Itens], Itens);
} }
/>
</View>
)
})
}
<Button title='press' onPress={ (e) => { console.log(Itens) } } />
{/* <RNDateTimePicker
testID="dateTimePicker"
value={parseISO(date)}
mode='date'
is24Hour={true}
display="default"
onChange={onChange}
/> */}
</View>
)
}
const Css = StyleSheet.create({
input:{
borderWidth: 2,
width: '100%',
padding: 5,
fontSize: 20,
marginTop: 10,
marginBottom: 10
}
})
Esse é o resultado de vários inputs sendo criado a partir de um array da API, e com o uso do DateTimePicker react-native-datetimepicker, era o que eu relamente precisava:
import React, { useState, useEffect } from 'react'
import { Button, View, StyleSheet, TextInput } from 'react-native'
import RNDateTimePicker from '@react-native-community/datetimepicker';
import { parseISO, format } from "date-fns";
export default function Teste(){
/// VIRÁ DA API - sintaxe à definir
var ItensMenu = [
{title: 'Nome', type: 'input', id: 'id1'},
{title: 'CPF', type: 'number', id: 'id2'},
{title: 'Data de Nascimento', type: 'date', id: 'id3'},
{title: 'Data de Cadastro', type: 'date', id: 'id4'},
]
/// VIRÁ DA API
const [Itens, setItens] = useState([]);
const [showDate, setShowDate] = useState([]);
const [date, setDate] = useState('2018-04-01 16:00:00');
let ItensDate = []
ItensMenu.map((item, idx) => {
ItensDate = [...ItensDate, {showDate: false}]
})
useEffect(() => {
setItens(ItensMenu)
setShowDate(ItensDate)
}, [])
return(
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
{
Itens.map((item, index) => {
return(
<View key={'view_'+index} style={{flex:1, justifyContent: 'center', alignItems: 'center', width: '100%'}}>
{showDate[index].showDate ?
<RNDateTimePicker
// testID="dateTimePicker"
value={parseISO(date)}
mode='date'
is24Hour={true}
display="default"
onChange={ (e, value) => {
const formattedDate = format(
value,
"'Dia' dd 'de' MMMM', às ' HH:mm'h'"
);
Itens[index].id = formattedDate;
setItens([...Itens], Itens);
showDate[index].showDate = false;
setShowDate([...showDate], showDate)
}
}
/>
:
null
}
<TextInput
value={Itens[index].id}
style={Css.input}
onTouchStart={ () => {
showDate[index].showDate = true;
setShowDate([...showDate], showDate)
}
}
showSoftInputOnFocus={false}
onChangeText={ (value) => {
Itens[index].id = value
setItens([...Itens], Itens);
} }
/>
</View>
)
})
}
<Button title='press' onPress={ (e) => {
console.log(Itens)
} } />
</View>
)
}
const Css = StyleSheet.create({
input:{
borderWidth: 2,
width: '100%',
padding: 5,
fontSize: 20,
marginTop: 10,
marginBottom: 10
}
})