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

user_14599009 0
Viewed 54

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

react-native reactjs
2 Answers

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;
user_81960250

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 :)

user_68096610
Related