Can Someone Tell me whats Wrong with my code

Look what I built!
1 
type import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, ScrollView, FlatList } from 'react-native';

import GoalItem from './components/GoalItem';

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>
      <Text>{enteredGoal}</Text>
      <Text>{JSON.stringify(courseGoals)}</Text>
      </View>
      <View>
          <FlatList
      keyExtractor={(item,index) => item.id}
    </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,
  },
   
});or paste code here
2 
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, ScrollView, FlatList } from 'react-native';

import GoalItem from './components/GoalItem';

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>
          {courseGoals.map(goal => (
         <View key={goal} style={styles.listItem}>     
        <Text>{enteredGoal}</Text>
      <Text>{JSON.stringify(courseGoals)}</Text>
      </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,
  },
   
});type or paste code here
3

i cant see how u helped @adamjnav

4

@adamjnav Preformatt <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> {courseGoals.map(goal => <View><Text style={styles.inputItems} key={goal}>{goal} </Text></View>)} <View key={goal} style={styles.inputItems}> <Text>{enteredGoal}</Text> <Text>{JSON.stringify(courseGoals)}</Text> </View> )) </View> </View>ed text

5

I don’t see any closing tag for FlatList. and also the wrapper View tag. Please have a look at it.? :bowing_man:
image

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

import GoalItem from './components/GoalItem';

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>
          {courseGoals.map(goal => <View><Text style={styles.inputItems} key={goal}>{goal} </Text></View>)}
         <View key={goal} style={styles.inputItems}>     
        <Text>{enteredGoal}</Text>
      <Text>{JSON.stringify(courseGoals)}</Text>
      </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,
},
inputItems:{
padding:10,
margin:10,
backgroundColor:'#ccc',
borderColor: 'black',
borderWidth: 1 
}, 
   
});
``` @ujjwolkayastha hey I made a change i don't get and error anymore but im gonna try and add some closing tags and further my code
7

Could it be there’s not a ; after the } after the last closing view tag

8

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