in react native flatlist render function.. i'm componenting out a textinput and I am passing value through state props but onchange never fires

Question

The text which is set to numerical never changes and the log never appears. This is so basic and weird that I can't get it to work.

const SetInput = props  => {



    return(
        <View>
        <TextInput 
                style={styles.textInput}
                keyboardType='numeric'
                onChange={props.handleSets}
                value={props.value}
                name={props.name}
                maxLength={10}  //setting limit of input
/>
        </View>
    )
  
};

heres the main component.... with setInput component and handleSets(); What happens is the number 4 initial state value is in the input but I can't change it and onChange never logs anything.

const FavoritesScreen = props  => {
const favorites = useSelector(state => state.favorites.favoritedExercises);


const [sets, setSets] = useState('4');



const dispatch = useDispatch();

const handleSets = (e) => {
    setSets(e.target.value)
   console.log('sets handled')
    
   
}


const WorkoutRenderHandler = (favorites) => {
    return(
        <SafeAreaView>
           
        <View style={styles.container}>
            
      
        <View style={styles.workoutItem}>
        <View style={styles.flexthing}>
       
            <Text numberOfLines={1} style={styles.name}> {favorites.item.name}</Text>
            {/* <Image source={{uri: favorites.item.gifUrl}} style={{width: 40, height: 40}}/> */}
            <Text style={styles.equipment}>{favorites.item.equipment}</Text>
            <SetInput onChange={handleSets}  value={sets}/>
          
           
        </View>
        </View>
        
      
        </View>
       
        </SafeAreaView>
    )
  
};






return ( 
        <ReturnedWorkoutList  data={favorites} renderItem={WorkoutRenderHandler} style={styles.screen} extaData={sets}/>
          
     

};

Answer 1

Try this

import React, { useState, useEffect } from "react";
import { Text, View, StyleSheet, TextInput,  } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';




export default function App() {
   const [formData, setData] = useState({});

   const handleSets = (e) => {
    setData({ ...formData, eventtitle: e })
    console.log('sets handled')
}
  return (
    <View style={styles.container}>
       <TextInput placeholder="WRITE HERE" onChangeText={value => handleSets(value)}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

DEMO: https://snack.expo.dev/@g1sm0/ryan-hartley