We Keep Coding

I want to verify a value using text input from an array, but I am not getting an output

I want to input a value, which will be compared to my dummy data, and once the value is compared, i'll get an alert if the value is matched or not
//UPDATE - I have made some changes to the code, not the alert is working, but the values are not being matched. only getting the second alert - Error.
import { View, Text, FlatList, TextInput, StyleSheet, TouchableOpacity, Button } from 'react-native'
import React, {useState} from 'react'
import { CATEGORIES } from '../DummyData/dummy-data'
const renderGridItem = (itemData) =>{
return (
<View style={{marginVertical:5,marginVertical:15, flex:1, margin:15}}>
<Text style={{color:'black'}}>
{itemData.item.id}
</Text>
</View>
)
}
const Meals = props => {
const [text, onChangeText] = useState();
var onClick = () => {
if (renderGridItem === text){
alert("ID Matched");
}
else{
alert('Error')
}
}
console.log(text)
return (
<View>
<FlatList keyExtractor={(item, index) => item.id}
data={CATEGORIES}
numColumns={2}
renderItem={renderGridItem} />
<TextInput
style={styles.tip}
placeholder='Enter CNIC'
keyboardType='default'
onChangeText={onChangeText}
value={text}
/>
<TouchableOpacity style={styles.top} onPress={() => { ()=>onChangeText(text); onClick()} }>
<Text style={{textAlign:'center'}}>
Enter
</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
tip:{
borderWidth:1,
marginVertical:50,
borderRadius:8
},
top:{
width:'30%',
borderWidth:1,
marginLeft:140,
padding: 10,
borderRadius:8
},
})
export default Meals
//Dummy-Data (Array)
import Data from "../Model/Data";
export const CATEGORIES = [
new Data('c1', 'Person 1', '#f5428d'),
new Data('c3', 'Person 2', '#f5a442'),
];
//Data
class Data {
constructor(id, title){
this.id=id,
this.title=title
}
}
export default Data

Please check the code it might be helpful to you.
import React, { useState, useEffect } from "react";
import {
StyleSheet,
SafeAreaView,
TextInput,
View,
Text,
Button,
TouchableOpacity,
} from "react-native";
const App = () => {
const [text, setText] = useState("");
function onPressButton() {
var result = DATA.some((item, index) => item.title == text);
if (result == true) {
alert("DATA Found");
} else {
alert("DATA not found");
}
}
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<TextInput
style={{ borderBottomWidth: 1, width: "90%", padding: 10 }}
placeholder="Enter Title"
onChangeText={(text) => setText(text)}
/>
<TouchableOpacity
style={{
width: 100,
height: 50,
borderWidth: 1,
justifyContent: "center",
alignItems: "center",
borderRadius: 10,
marginTop: 20,
}}
onPress={onPressButton}
>
<Text>Find</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
const DATA = [
{ id: 1, title: "ABC" },
{ id: 2, title: "XYZ" },
];
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
},
});
export default App;
OUTPUT:

How can I properly layer elements in JavaScript?

I am working on a (what I thought was) simple agenda app. Using React-Native Calendars to add an Agenda to my page. I wanted to create functionality to add items to the Agenda. I added a placeholder API to fill the Agenda with items so I can add additional styling before I enter in my own logic. I am trying to add a "+" button that will open a prompt to add an item to the Agenda. However, I cannot get the item to stack on top of the Agenda View.
import * as React from 'react';
import {View, StyleSheet, Text, TouchableOpacity, TouchableOpacityComponent, Platform} from 'react-native';
import {Agenda} from 'react-native-calendars';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {useEffect, useState} from "react";
import {addDays, format} from 'date-fns';
import {KeyboardAvoidingView, Touchable} from "react-native-web";
import {ScrollView} from "react-native-gesture-handler";
export default function CalendarView() {
type Item = {
name: string;
}
type Post = {
id: number;
title: string;
body: string;
userId: number;
};
const [items, setItems] = useState();
useEffect(() => {
// run once
const getData = async () => {
const response = await fetch(
'https://jsonplaceholder.typicode.com/posts',
);
const data: Post[] = await response.json();
const mappedData = data.map((post, index) => {
const date = addDays(new Date(), index);
return {
...post,
date: format(date, 'yyyy-MM-dd'),
}
})
const reduced = mappedData.reduce(
(acc: { [key: string]: Post[] }, currentItem) => {
const {date, ...coolItem} = currentItem;
acc[date] = [coolItem];
return acc;
},
{},
)
setItems(reduced);
}
getData();
}, []);
const renderItem = (item: Item) => {
return (
<View style={styles.itemContainer}>
<Text>{item.name}</Text>
</View>
);
};
return (
<View style={styles.container}>
<Agenda items={items} renderItem={renderItem}
style={styles.calendarWrapper}
scrollEnabled={true}
theme={{
// calendarBackground: '#000000'
todayTextColor: '#00adf5',
}}>
</Agenda>
<View behavior={Platform.OS === "ios" ? "padding" : "height"}>
<TouchableOpacity onPress={() => console.log("button pressed")}>
<View style={styles.addWrapper}>
<Ionicons name={'add-outline'} size={30} color={'black'}/>
</View>
</TouchableOpacity>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#E8EAED',
},
calendarWrapper: {},
items: {},
dayPressColor: {
backgroundColor: '#000000'
},
itemContainer: {
backgroundColor: 'white',
margin: 5,
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
addWrapper: {
width: 100,
height: 100,
backgroundColor: '#55BCF6',
borderRadius: 60,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#C0C0C0',
borderWidth: 1,
shadowRadius: 5,
shadowOpacity: 100
},
})
Image of the UI so Far
I am extremely new to JS and CSS in general so any help would be appreciated. If I can't get a button to be placed correctly where I want it, then adding the functionality will definitely be a challenge!

How to useState hooks with array

I am not able to push the number index in the array of useState.
Where I am going wrong, do I want to push the index of numbers when I click them?
I am extracting the previous state array and then I push new but nothing happens.
How to push a new element inside useState array React hook? My code doesn't work!!
Please someone check.
Game.js
import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import RandomNumber from "./RandomNumber";
export default function Game(props) {
const [state, setstate] = useState([]);
let randomNumber = Array.from({ length: props.randomNumberCount }).map(
() => 1 + Math.floor(10 * Math.random())
);
let target = randomNumber
.slice(0, props.randomNumberCount - 2)
.reduce((acc, curr) => acc + curr, 0);
const isNumberSelected = (numberIndex) => {
return state.indexOf(numberIndex) >= 0;
};
const selectNumber = (numberIndex) => {
setstate((arr) => [...arr, numberIndex]);
};
return (
<View style={styles.container}>
<Text style={styles.header}>Target Sum Game</Text>
<Text style={styles.target}>{target}</Text>
<View style={styles.randomContainer}>
{randomNumber.map((randomNumber, index) => (
<RandomNumber
key={index}
id={index}
number={randomNumber}
isSelected={isNumberSelected(index)}
onClick={() => selectNumber}
/>
))}
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#ddd",
paddingTop: 30,
},
target: {
fontSize: 30,
backgroundColor: "#aaa",
margin: 50,
marginHorizontal: 70,
textAlign: "center",
},
header: {
fontSize: 35,
backgroundColor: "dodgerblue",
textAlign: "center",
marginHorizontal: 30,
marginTop: 50,
},
randomContainer: {
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-around",
},
});
RandomNumber.js
import React from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";
export default function RandomNumber(props) {
const handlePress = () => {
props.onClick(props.id);
};
return (
<TouchableOpacity onPress={handlePress()}>
<Text style={[styles.random, props.isSelected && styles.selected]}>
{props.number}
</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
random: {
backgroundColor: "#999",
width: 100,
marginHorizontal: 35,
marginVertical: 25,
fontSize: 35,
textAlign: "center",
},
selected: {
opacity: 0.3,
},
});

you are not calling the function
onClick={() => selectNumber(index)}

You need to change the onClick prop and pass the randomNumber (or index depending of what you want to do) to the selectNumber function:
// Not sure if you want to pass randonNumber or index but you get the idea
onClick={() => selectNumber(randomNumber)}

<TouchableOpacity onPress={handlePress()}>
should be
<TouchableOpacity onPress={()=>handlePress()}>
and
() => selectNumber
should be
() => selectNumber()
please try it

Might Be This Helpful:
Home.Js
import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import RandomNumber from './RandomNumber';
const Home = props => {
const [state, setstate] = useState([]);
useEffect(() => {
console.log('state', state);
}, [state]);
let randomNumber = Array.from({length: 10}).map(
() => 1 + Math.floor(10 * Math.random()),
);
let target = randomNumber
.slice(0, props.randomNumberCount - 2)
.reduce((acc, curr) => acc + curr, 0);
const isNumberSelected = numberIndex => {
return state.indexOf(numberIndex) >= 0;
};
const selectNumber = numberIndex => {
console.log('numberIndex', numberIndex);
setstate(arr => [...arr, numberIndex]);
};
return (
<View style={styles.container}>
<Text style={styles.header}>Target Sum Game</Text>
<Text style={styles.target}>{target}</Text>
<View style={styles.randomContainer}>
{randomNumber.map((randomNumber, index) => {
return (
<RandomNumber
key={index}
id={index}
number={randomNumber}
isSelected={isNumberSelected(index)}
onClick={() => selectNumber(randomNumber)}
/>
);
})}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ddd',
paddingTop: 30,
},
target: {
fontSize: 30,
backgroundColor: '#aaa',
margin: 50,
marginHorizontal: 70,
textAlign: 'center',
},
header: {
fontSize: 35,
backgroundColor: 'dodgerblue',
textAlign: 'center',
marginHorizontal: 30,
marginTop: 50,
},
randomContainer: {},
});
export default Home;
RandomNumber.js
import React from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default function RandomNumber(props) {
const handlePress = () => {
props.onClick(props.id);
};
return (
<View style={{}}>
<TouchableOpacity onPress={() => handlePress()}>
<Text style={[styles.random, props.isSelected && styles.selected]}>
{props.number}
</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
random: {
backgroundColor: '#999',
width: 100,
height: 100,
marginHorizontal: 35,
marginVertical: 25,
fontSize: 35,
textAlign: 'center',
},
selected: {
opacity: 0.3,
},
});
Output Log:

React native `input` must be a function received undefined

I have an array which displays a list of jobs with the radio button(each).If I click any radio button I want to get its value so far I'm getting an error input must be a function received undefined. how can I achieve something like this in react native?
Code
import React, {useState} from 'react';
import {View, Text, TextInput, Image,Button,Body,Pressable,ScrollView,Switch} from 'react-native';
export default function Home({ navigation}){
let roles = navigation.getParam('roles')
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
const handleClick = (data, e) => {
alert(e.target.value, data);
}
<View>
{
Object.keys(roles).map((key) => {
return (
<View>
<View style={styles.XYQHC}>
<Text>{roles[key]['name']}</Text>
<Switch
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={isEnabled}
/>
<input type="radio" name="roles" value={roles[key]['name']} defaultChecked={roles[key]['id'] == 3 ? true : false } onClick={handleClick.bind(this, roles[key]['name'])}/>
</View>
</View>
)
})
}
</View>
};

I had to edit a little bit to make it work and to assume some input data but here is a working example of your code:
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
function RadioButton({ label, onPress, selected, style }) {
return (
<TouchableOpacity
style={[
{
flexDirection: 'row',
alignItems: 'center',
marginLeft: 12,
marginVertical: 20,
},
style,
]}
onPress={onPress}>
<View
style={{
height: 24,
width: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: '#000',
alignItems: 'center',
justifyContent: 'center',
marginRight: 12,
}}>
{selected ? (
<View
style={{
height: 12,
width: 12,
borderRadius: 6,
backgroundColor: '#000',
}}
/>
) : null}
</View>
<Text>{label}</Text>
</TouchableOpacity>
);
}
export default function Home({ navigation }) {
// let status = navigation.getParam('status');
let status = 2;
// let roles = navigation.getParam('roles');
let roles = [
{
id: 1,
name: 'lawyer',
},
{
id: 2,
name: 'farmer',
},
{
id: 3,
name: 'architect',
},
];
const [isEnabled, setIsEnabled] = useState(false);
const [chosenRole, setChosenRole] = useState(false);
useEffect(() => {
roles.find((role) => {
if (role.id === status) {
setChosenRole(role);
return true;
}
return false;
});
}, []);
const handleClick = (data) => {
console.log(data);
setChosenRole(data);
};
return (
<View style={{ marginTop: 30 }}>
{roles.map((role) => {
return (
<View>
<RadioButton
label={role.name}
selected={role.name === chosenRole.name}
onPress={() => handleClick(role)}
/>
</View>
);
})}
</View>
);
}

create variable dynamically in react-native component

i need to create a variable in a react-native component, which i want to use several times...each instance of this component needs to have a different variable name to reference to.
<View ref={view => { shapeView = view; }}
onLayout={({ nativeEvent }) => {
shapeView.measure( (x, y, width, height, pageX, pageY) => {
console.log('- - - DEBUG: width:' + width + ', pageX:'+ pageX + ', pageY:' + pageY);
let shapePickerPosition = {w: width, x: pageX, y: pageY};
setShapeCoords(shapePickerPosition);
})
}}>
as i said, i want to use this code inside a component, and this component several times, and if i don't change die variable: "shapeView" i end up with just the coordinates from the last instance of that component..
here's the whole component:
import React, {useState, useEffect} from 'react';
import {StyleSheet, View, Text, Modal, TouchableOpacity, Pressable, FlatList} from 'react-native';
import { useTheme} from '#react-navigation/native';
// ------------------PickerRow-----------------------------------------------------------------------
function CustomPickerRow(props) {
const { colors } = useTheme(); // works
const theme = useTheme();
const [selectedItem, setSelectedItem] = useState('choose');
const [coordinates, setCoordinates] = useState();
const setItem = (value) => {
// set parent state
props.action(value)
}
return (
<View
ref = { view => { shapeView = view; } }
onLayout={({ nativeEvent }) => {
shapeView.measure( (x, y, width, height, pageX, pageY) => {
console.log('height:', height);
console.log('width:', width);
console.log('x:', pageX);
console.log('y:', pageY);
let coords = {w: width, x: pageX, y: pageY};
setCoordinates(coords);
})
}}
style = {{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: 25,
paddingLeft: 5,
marginBottom: 3,
backgroundColor: colors.frameBackground,
borderColor: colors.borderColor,
borderWidth: 1,
borderRadius: 5}}>
<View style = {styles.icon} >
<Text style = {styles.text}>{props.icon}</Text>
</View>
<View style = {styles.description} >
<Text style = {{fontSize: 11, fontWeight: 'bold', color: colors.text, textAlign: 'left', marginLeft: 5,}}>{props.title}</Text>
</View>
<MyPicker data={props.data} action={setItem} position={coordinates}/>
</View>
);
}
// ------------------MyPicker-----------------------------------------------------------------------
function MyPicker(props) {
const { colors } = useTheme(); // works
const theme = useTheme();
const [isVisible, setIsVisible] = useState(false);
const [selectedItem, setSelectedItem] = useState(props.data[0].key)
const [coordinates, setCoordinates] = useState({w: 180, x: 0, y: 0});
useEffect(() => {
if (props.position) {
setCoordinates(props.position);
}
})
const setItem = item => {
// set parent state
props.action(item.value);
setIsVisible(false);
console.log("chosen value = " + item.key);
setSelectedItem(item.key);
}
const showPicker = () => {
setIsVisible(true);
}
const renderItem = ({item}) => {
return <View>
<Pressable onPress={() => setItem(item)}>
<Text style={{color: colors.text, fontSize: 17, alignSelf: 'center', paddingTop: 3}}>
{item.key}
</Text>
</Pressable>
</View>
}
return (
<View style={{flex:5, backgroundColor: 'transparent'}}>
<TouchableOpacity onPress={showPicker}>
<Text style={{color: colors.textSubtitleColor, fontSize: 11, alignSelf: 'flex-end', paddingRight: 10}}>
{selectedItem}
</Text>
</TouchableOpacity>
<Modal animationType="fade"
transparent={true}
visible={isVisible}
style={styles.testPicker}
onRequestClose={() => {
console.log('Modal has been closed.');
}}
>
<View style={{ backgroundColor: colors.frameBackground,
borderColor: colors.borderColor,
borderWidth: 1,
borderRadius: 5,
position: 'absolute',
width: 180,
height: 200,
left: coordinates.x, //100,
top: coordinates.y //160
}}>
<FlatList
data={props.data}
renderItem={renderItem}
/>
</View>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
testPicker: {
backgroundColor: 'gray',
position: 'absolute',
width: 112,
height: 200,
left: 100,
top: 160
},
icon: {
flex: 1,
backgroundColor: '#00529F',
marginRight: 0,
borderRadius: 5
},
description: {
flex: 2,
height: 17,
backgroundColor: 'transparent',
marginRight: 0,
borderRadius: 5
},
});
export default CustomPickerRow;
and i call that component like this:
<CustomPickerRow id='shapePicker' icon='2' title='Shape:' data={shapeItems} action={setShape} selectedItem={selectedShape} visible={modalVisible} />```

shapeView should be a ref like this:
const MyComponent = () => {
const shapeView = useRef();
return (
<View
ref={view => shapeView.current = view}
/* could also look like this: ref={shapeView} */
onLayout={({nativeEvent}) => {
shapeView.current.measure(...);
}
/>
)
}
It SHOULD NOT be like this:
let shapeView; // this is outside your component - it shouldn't be here
const MyComponent = () => {
return (
<View
ref={view => shapeView = view}
onLayout={({nativeEvent}) => {
shapeView.measure(...);
}
/>
)
}
In a class based component it could look like this:
class MyComponent extends React.Component {
constructor() {
this.shapeView = React.createRef();
}
render() {
return (
<View
ref={this.shapeView}
onLayout={({nativeEvent}) => {
this.shapeView.current.measure(...);
}
/>
)
}
}