Add Button help

Expo SDK
1

Please provide the following:

  1. SDK Version:
  2. Platforms(Android/iOS/web/all):

Hey i created the add button within my app but it wont store the data after i add it im between 1:45 2 on the React Native Crash 2020 course

2

Can you post the code?

3

thank you so much and some of the codes probably bugged i got stuck and tried to continue the lesson .

import { StatusBar } from ‘expo-status-bar’;

import React, { useState } from ‘react’;

import { StyleSheet, Text, View, TextInput, Button } from ‘react-native’;

export default function App() {

const [enteredGoal, setEnteredGoal]= useState(‘’);

const [courseGoals, setCourseGoals]= useState();

const goalInputHandler = (enteredText) => {

setEnteredGoal(enteredText);

};

const addGoalHandler = () => {

setCourseGoals(currentGoals =>[…courseGoals, enteredGoal ]);

};

return (

<View style={styles.screen} >

  <View style={styles.inputContainer}>

  <TextInput 

  placeholder="Course Goals" 

  style={styles.input} 

  onChangeText={goalInputHandler}

  value={enteredGoal}

  />

  <Button title="ADD" onPress={addGoalHandler} />

  </View>

  <View></View>

);

}

const styles = StyleSheet.create({

screen: {

padding: 50

},

inputContainer: {

flexDirection:‘row’,

justifyContent:‘space-between’,

alignItems:‘center’,

},

input:{

width:'80%',

borderColor:'black',

borderWidth:1,

padding:10,

}});

4

Please edit your post, highlight all of the code and click the </> button so that it formats the code correctly.

5 
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default function App() {
 const [enteredGoal, setEnteredGoal]= useState('');
 const [courseGoals, setCourseGoals]= useState([]);
 
 const goalInputHandler = (enteredText) => {
   setEnteredGoal(enteredText);
 };
 const addGoalHandler = () => {
   setCourseGoals(currentGoals =>[...courseGoals, enteredGoal ]);
 };
  return (
    <View style={styles.screen} >
      <View style={styles.inputContainer}>
      <TextInput 
      placeholder="Course Goals" 
      style={styles.input} 
      onChangeText={goalInputHandler}
      value={enteredGoal}
      />
      <Button title="ADD" onPress={addGoalHandler} />
      </View>
      <View></View>
</View>
  



   );
} 


const styles = StyleSheet.create({
 screen: {
   padding: 50
},
inputContainer: {
  flexDirection:'row',
  justifyContent:'space-between',
  alignItems:'center',
},
input:{
    width:'80%',
    borderColor:'black',
    borderWidth:1,
    padding:10,

}});
6

It does store the data. You just need to display it somewhere.

See this snack as an example. I have made a small change to your code:

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.