Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

202
Vistas
React Native, how to get values from multiple TextInputs into one object by pressing a Button?

I'm trying to put values from different TextInput's into 1 object. I'm new to React in general and don't have a firm grasp of states yet. So far my code is like this:

function App() {

  const [enteredText, setEnteredText] = useState()
  const [firstText, setFirstText] = useState()
  const [secondText, setSecondText] = useState()

  function textChange(enteredText) {
    console.log(enteredText) //I want firstText and secondText here
  }
  return (
    <View style={styles.container}>

      <Text style={styles.header}>Great one!</Text>

      <TextInput 
        value={firstText}
        onChangeText={text=>setEnteredText(text)}
        style={styles.input} 
        placeholder='1st text' />

      <TextInput 
        value={secondText}
        onChangeText={text=>setEnteredText(text)}
        style={styles.input} 
        placeholder='2nd text' />

      <Button
        onPress={()=>textChange(enteredText)}
        title='Submit'
        color='orange' />

    </View>
  );
}

export default App;
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You coud listen to firstText and secondText with useEffect and put them inside enteredText every time they change, like so:

function App() {
  const [enteredText, setEnteredText] = useState();
  const [firstText, setFirstText] = useState();
  const [secondText, setSecondText] = useState();

  function textChange(enteredText) {
    console.log(enteredText); // will gives you {firstText : "whatever", secondText: "firstText"}
  }

  useEffect(() => {
    setEnteredText({
      firstText,
      secondText,
    });
  }, [firstText, secondText]);

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Great one!</Text>

      <TextInput
        value={firstText}
        onChangeText={(text) => setFirstText(text)}
        style={styles.input}
        placeholder="1st text"
      />

      <TextInput
        value={secondText}
        onChangeText={(text) => setSecondText(text)}
        style={styles.input}
        placeholder="2nd text"
      />

      <Button
        onPress={() => textChange(enteredText)}
        title="Submit"
        color="orange"
      />
    </View>
  );
}

about 4 years ago · Juan Pablo Isaza Denunciar

0

You're really close! What you want (enteredText) shouldn't actually be a state. It logically flows from the first and second texts, so you can just have it be a constant.

Like this:


function App() {

  // changed the default state to be an empty string instead of
  // the default undefined value. But either would work.
  const [firstText, setFirstText] = useState("")
  const [secondText, setSecondText] = useState("")

  const enteredText = firstText + secondText

  // I'd probably rename this function to "handleSubmit"
  function textChange() {
    console.log(enteredText)
  }

  return (
    <View style={styles.container}>

      <Text style={styles.header}>Great one!</Text>

      <TextInput 
        value={firstText}
        onChangeText={text=>setFirstText(text)}
        style={styles.input} 
        placeholder='1st text' />

      <TextInput 
        value={secondText}
        onChangeText={text=>setSecondText(text)}
        style={styles.input} 
        placeholder='2nd text' />

      <Button
        onPress={textChange}
        title='Submit'
        color='orange' />

    </View>
  );
}

export default App;

Note how I changed the onChangeText callbacks for the TextInputs

So you set firstText and secondText in their respective onClicks. Whenever the state is updated, the component rerenders, and runs all the code in the function body. the constant enteredText will be created on each run, and will always be the most recent concatenation of the two states.

Hope this helps!

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda