CODEWITHSUNDEEP
reactjsreact-native
AHMAD IRSHAD
AHMAD IRSHAD

Reputation: 119

why I am getting this error what is the problem in my code?

This is my code and the error I am getting is in attached picture what is the error in my code. The Purpose of my code is that whenever I click Add new box button a box with random color will be displayed below the previously created box.

import {styleSheets,View,Text,Button,FlatList} from 'react-native';

const ColorF= () => {
    const[colors,setColor] = useState([]);
    //console.log(colors)
<View>
    <Button title = "Add a new box"
    onPress = {()=>{
        setColor([...colors,randomRgb()])
    }}
    />
    </View> 
    return(
    
<FlatList
    data = {colors}
    KeyExtractor = {(colors)=>colors.item}
    renderItem = {({item})=>{
    
    return <View style ={{height:100,width:100,backgroundColor:randomRgb(item)}}>
    }
    }
    />
    );
}

const randomRgb=()=>{
    const red = Math.floor(Math.random()*256);
    const green = Math.floor(Math.random()*256);
    const blue = Math.floor(Math.random()*256);
    return `rgb(${red},${green},${blue})`;

};

export default ColorF;

This is the error I am getting This is the error I am getting

Upvotes: 1

Views: 101

Answers (2)

Rohit Aggarwal
Rohit Aggarwal

Reputation: 1190

There were many missing closing tags for components fixed them.

import React, {useState} from 'react';
import {StyleSheet, View, Text, Button, FlatList} from 'react-native';

const App = () => {
  const [colors, setColor] = useState([]);
  //console.log(colors)
  const randomRgb = () => {
    const red = Math.floor(Math.random() * 256);
    const green = Math.floor(Math.random() * 256);
    const blue = Math.floor(Math.random() * 256);
    return `rgb(${red},${green},${blue})`;
  };
  return (
    <View>
      <Button
        title="Add a new box"
        onPress={() => {
          setColor([...colors, randomRgb()]);
        }}
      />

      <FlatList
        data={colors}
        KeyExtractor={colors => colors.item}
        renderItem={({item}) => {
          return (
            <View
              style={{
                height: 100,
                width: 100,
                backgroundColor: randomRgb(item),
              }}></View>
          );
        }}
      />
    </View>
  );
};
export default App;

Upvotes: 1

heymoo
heymoo

Reputation: 81

Try going through and making sure all your elements like <View> and <FlatList> are properly closed and the braces for your function expression like renderItem match up are actually closing up where you think. A hint is that the rest of your code lost its syntax highlighting. Something that can help you is going back through all your lines and trying to fix your indentation so that you can be sure things are inside where you think they should be :)

Upvotes: 0

Related Questions